30-second read.

If you only want a simple gallery on your WordPress website and have decided to use the lightweight Gutenberg (GB) Gallery Block that comes as the default gallery in the Gutenberg editor, you may be a bit frustrated at how the stacking works (or doesn’t in this case) on a mobile device. I can’t guarantee this will work in every case, but the CSS below worked for me whilst working on a client’s website.

Example:- You select two columns in the block’s gallery settings and this is how it renders on both desktop and mobile, but you only want to show images stacked in one column on a mobile phone.

Older CSS that doesn’t work

It’s now 2023 so it could be the case that you’ve tried various bits of CSS from other websites and they don’t work. It may be that it used to work but no longer does. If that’s the case, then this code works for me in 2023 so, depending on the complexity of your website/theme, it may work for you too.

How to make your gallery single-column-stack responsive on a mobile

Try adding the below CSS to your theme/child theme’s “additional CSS” field or “style.css” file to make the default Gutenberg gallery block one-single-column responsive on a mobile:

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

Thanks to Alvaro in this thread and he mentions that it’s a topic that’s also being discussed in a thread on GitHub here and also another thread here too if you’re interested in finding out more.

Good luck with the code and I hope it worked for you!