Gutenberg Image gallery – mobile

  • frankaboutcroatia

    (@frankaboutcroatia)


    5 years, 6 months ago

    Hi,
    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!
    vera

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

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

    (@isabel_brison)

    5 years, 5 months ago

    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)

The topic ‘Gutenberg Image gallery – mobile’ is closed to new replies.