Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Show 3 images side by side on Gallary for mobile also

  • Pintu Biswas
    April 25, 2024 at 11:48 pm

    Hi there, When I’m adding 3 images to Gallary, on mobile the first two images are showing side by side, and the third one showing in full size, separately. https://postimg.cc/Y4SJFHhy

    I want all the 3 images to be side by side on mobile. How do I do that?

    Page URL: https://geekcrave.com/uninstall-bixby-using-adb (Scroll down a little you’ll see the gallery)

    Thanks.

  • David
    April 26, 2024 at 4:11 am

    Hi there,

    you can force the default 3 column gallery to remain 3 columns with this CSS:

    
.wp-block-gallery.columns-default {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); 
}
.wp-block-gallery.columns-default > .wp-block-image {
    width: 100% !important;
}

    For galleries where you don’t have 3 images, and you want them to continue to fill the row, you will need to change the columns count in the gallery block settings.

  • Pintu Biswas
    April 26, 2024 at 6:31 pm

    Hi this CSS works as I wanted for 3 images gallery.

    However, the 2 image gallery creates a space after the second image on the mobile device.

    See here: https://postimg.cc/4YfrNqM8

    Kindly tell me how to fix this.

  • David
    April 27, 2024 at 4:07 am

    referencing my reply above:

    For galleries where you don’t have 3 images, and you want them to continue to fill the row, you will need to change the columns count in the gallery block settings.

    ie. change the Gallery Block settings to 2 columns

  • Pintu Biswas
    April 27, 2024 at 4:35 am

    ie. change the Gallery Block settings to 2 columns

    It is already set to 2. https://postimg.cc/CZR1TH2P

    Also, I don’t think you can set 3 columns when you’ve only 2 images in the Gallery.

  • David
    April 27, 2024 at 5:13 am

    Ah sorry, my bad.
    I should of expected the WordPress CSS to be terrible lol

    Add this CSS to make a 2 column gallery into 2 columns:

    
.wp-block-gallery.columns-default.wp-block-gallery-2 {
    grid-template-columns: repeat(2, 1fr); 
}
  • Pintu Biswas
    April 29, 2024 at 9:16 am

    Hi David, adding this CSS 

    .wp-block-gallery.is-layout-flex {
    flex-wrap: unset;
}

    finally fixed my problem.

  • David
    April 29, 2024 at 11:57 pm

    Glad to hear that
    Just beware if you have A LOT of images in the gallery they will all try and stay on the one line….

  • Pintu Biswas
    April 30, 2024 at 12:43 am

    I see…

    But this is the best solution for right now for my needs.

    I wish WordPress Gallery had a built-in control for this. To me, the Gallery Block right now is very limited.

    Also, will there be a Gallery Block from GB anytime soon? That’d be awesome.

  • David
    April 30, 2024 at 5:15 am

    We have plans for mare advanced galleries that use query loops.
    Theres a feature request open for it in the feedback , if you want to add your vote:

    https://feedback.generateblocks.com

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.