Support » Plugin: Gutenberg » Gutenberg Image gallery – mobile

  • frankaboutcroatia


    I am using 3 column image gallery on a desktop that I would like to turn into one column image gallery on mobile. I have found on the forum the css that does this:
    @media (max-width: 800px) {
    .wp-block-gallery .blocks-gallery-grid li.blocks-gallery-item {
    width: 100%;
    It transforms a three-column image gallery on a desktop to a one-column image gallery on a mobile. But, not all images are the same. Every second image has a smaller width than the preceding or the following image. Any idea why is it happening and how can I fix it?

    Thanks a lot!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Isabel Brison


    Hi! That happens because the default display for gallery images on mobile is two columns, and every second image has a margin. The fix for it is to add margin-right: 0; to that snippet of code, right under width: 100%;.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.