Gallery Block – Image Stacking on Mobile

  • hi folks,

    I am looking for CSS help stacking the GB Gallery block on mobile to one column.

    I am aware of this post (thanks @jorgefilipecosta !). However, unfortunately none of the code appears to be functional with current GB. It simply produces no result.

    I have tried calling <.wp-block-gallery-10> as that appears to be the (new?) identifier for the Gallery but this too has produced zero result.

    Would be great to see the built-in option to have the Gallery stack images on mobile, especially given that the images are linked and that this hyperlinking is useless when they shrink down to millimetres in size. The images need to be (a) big enough to properly view on mobile and (b) big enough to touch and thus act as a call 2 action. Stacking to one column is expected web behaviour in 2022. Having images shrink to the point of becoming difficult to perceive or interact with is not.

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

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

  • Hi @slackerofthemind,

    I am looking for CSS help stacking the GB Gallery block on mobile to one column.

    I was checking the link you sent and it looks like the images under Our Partners are stacked on mobile view as shown here: https://snipboard.io/EygqtS.jpg

    Did you manage to come up with the CSS code?

    Would be great to see the built-in option to have the Gallery stack images on mobile,

    It would be great to have the option to change how content on a block is displayed depending on the screen size. I did a quick search on Gutenberg feature requests and I found something that comes close to what you mentioned:

    https://github.com/WordPress/gutenberg/issues/42701

    Feel free to add your own experience and suggestions on the issue.

    hi @slackerofthemind!

    You should be able to “force stack” gallery images into a single column on mobile only using the following CSS code:

    @media all and (max-width:760px){
  .wp-block-gallery .wp-block-image {
    width:100% !important;
  }
}

    Adding this as a feature in the editor is currently being discussed in these two issues:

    – https://github.com/WordPress/gutenberg/issues/40870
    – https://github.com/WordPress/gutenberg/issues/41781

    I hope that helps!

    Thread Starter slackerofthemind

    (@slackerofthemind)

    @thelmachido – much thanks! As I’ve (still) not been able to achieve anything with CSS, I created a work-around using hide-element behavious in WP. In Desktop mode, WP shows the Gallery. In Tablet + Mobile, it shows a column of images. So it’s not stacking the Gallery, it’s hiding the Gallery in Tablet + Mobile and showing a column instead. Not as elegant, but it works.

    Thread Starter slackerofthemind

    (@slackerofthemind)

    @mrfoxtalbot

    Thanks Alvaro!

    Unfortunately no dice with this CSS code or variants. No idea why.

    And yes, Gallery stacking should 100% be an option in WP GUI. It blows my mind that it isn’t, as it currently produces unwanted and undesirable image behaviours that disrupt calls 2 action.

    Hi again @slackerofthemind

    I was looking at your site and the logos DO seem to be stacking on mobile now. This is what I am seeing:

    Screen Shot on 2022 09 05 at 14 20 08

    Could you please confirm it your achieved your goal here? It might be the case that you need to adjust the mobile query to make it “snap” earlier. You could replace the value of 760px with something bigger, say 1024px.

    • This reply was modified 2 years, 2 months ago by Alvaro Gómez.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Gallery Block – Image Stacking on Mobile’ is closed to new replies.