Gallery responding in a strange way

  • Resolved joelsperanza

    (@joelsperanza)


    4 years, 10 months ago

    Hi all, I’m having some trouble with css and a gallery and I was hoping you might be able to help.

    The offending gallery is the first 3 images on this page: [ redundant link removed ]

    On desktop, that’s fine, 3 images side by side. But when I switch to Mobile, I would like 3 equal sized images one underneath each other. Instead, I get two small images side by side, and one large on underneath.

    How can I set the CSS in this gallery to behave appropriately?

    Bare in mind, I’m a bit of a website building noob. I’m hoping I can set an additional css class to the gutenberg block and then alter that… But I’m already a bit out of my depth.

    • This topic was modified 4 years, 10 months ago by Jan Dembowski.

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there!

    Try adding this piece of code:

    /*Displays gallery in one column on small screens*/
@media only screen and (max-width: 768px) {
.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item {
    width: 100%;
}
.blocks-gallery-grid, .wp-block-gallery {
    flex-direction: column;
}
}

    I hope that helps ??

    Thread Starter joelsperanza

    (@joelsperanza)

    That is amazing!! thank you so much, it’s worked perfectly.

    I don’t want to be greedy, but would you be able to tell me how would I alter that code if I wanted two columns on Mobile?

    I’m glad that the code worked out for you!
    As for adding two columns on mobile, I would actually advise against that because, as there is not much space on small screens, it would decrease your site’s accessibility.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Gallery responding in a strange way’ is closed to new replies.