Gutenberg gallery block – stacking on mobile

  • Resolved maryb1

    (@maryb1)


    4 years, 5 months ago

    Hello,

    I’m using a two-column gallery block and would like it to become one column on mobile. I know @mkuhnell has asked this question a while back. The only solutions provided were to used the classic block or to use two regular columns. I’m aware there are also third-party blocks, but I would prefer to use the native gutenberg block.

    I’m sure this can be done with media queries in the css file, but I’m not familiar with flex, so any tips using the classes specific to that block would be helpful.

    Also, is the possibility to control some media queries directly in the blocks planned in future releases?

    Thank you for your time.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Jorge Costa

    (@jorgefilipecosta)

    Hi @maryb1!

    You can use the following media query to make image stack on mobile:

    @media (max-width: 800px) {
    .wp-block-gallery .blocks-gallery-grid li.blocks-gallery-item {
        width: 100%;
    }
}

    We have some plans to improve the mobile controls in the future but I’m not sure a stack on mobile option for the gallery is something that is planned at the moment.

    I hope this information is useful, let us know if you have any further questions!

    Hi there, looking to do this on my site as well, is there CSS that can be added to the block itself when in the editor? Would love for this to be a toggle option in the future, hopefully that’s in a future update.

    • This reply was modified 3 years, 11 months ago by mystylevita.

    Hi there,
    this CSS does a job, my three-column gallery block turns into one column on mobile, but every second image shows less wide than the previous or the following image. Any idea how to fix this? Thanks!

    For me works this code withouth @media (max-width: 800px):

    .wp-block-gallery .blocks-gallery-item {
    margin: 0 0 1em 0;
    width: 100%;
    }

    I managed to turn 3 columns into 2 beautifully with this:

        
@media only screen and (max-width: 992px) {
   li.blocks-gallery-item {
      width: 40%;
      margin: 1em;
   }
}
    • This reply was modified 3 years, 8 months ago by bakercodes.
    • This reply was modified 3 years, 8 months ago by bakercodes.
    • This reply was modified 3 years, 8 months ago by bakercodes.
    • This reply was modified 3 years, 8 months ago by bakercodes.
    • This reply was modified 3 years, 8 months ago by bakercodes.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Gutenberg gallery block – stacking on mobile’ is closed to new replies.