Column images stacking on mobile

  • Jessica

    (@jessica-korteman)


    2 years, 6 months ago

    Hi there,

    I’ve created an “As seen in” section on my website with six logos underneath (created using a three column block and then splitting those into two with image files).

    I love the way it looks on desktop all in one row, but on mobile it stacks all six images making them quite large and with lots of space in between, making it quite a scroll to get past. I’d like the images on mobile only to be “paired together” as per the three original columns. So on mobile it would be two logos across over three rows and without a lot of space in between them.

    Can anyone assist with CSS for this? I have tried the “group” functionality but it doesn’t seem to be working.

    Many thanks in advance for any assistance you can provide.

    • This topic was modified 2 years, 6 months ago by Jan Dembowski.

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

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

  • Try the folliwing in APPEARANCE => CUSTOMIZE => ADDITIONAL CSS box:

    This should get you the 3×2 matrix:

    .home .wp-container-12.wp-block-columns, .home .wp-container-16.wp-block-columns, .home .wp-container-20.wp-block-columns {
flex-wrap: nowrap !important;
margin-bottom: 0;
}

    And this should further reduce the vertical gaps between the rows:

    .home .wp-container-22.wp-block-columns {
row-gap: 0px;
}

    Standing by for feedback.

    (NB: Using the !important rule is not considered a good practice. But I had to use it here because it’s already been used at several places in your CSS for these images, making it difficult to override the existing styles. OK, I could very likely have figured out a way, but it’s Sunday… and I’m not that smart on Sundays ?? )

    Thread Starter Jessica

    (@jessica-korteman)

    Hi George,

    Thank you very much for this! And thank you for your note about !important as I wasn’t aware of that.

    I assume if I want these images to be any closer together, I would need to crop them in and re-upload?

    Also, do you think you might be able to help me with a similar issue in the footer? I have 3 logos in the right footer that are also stacking on mobile. I’d like them to be all on the one line (3 across) if possible.

    Thank you in advance for any assistance you may be able to provide.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Column images stacking on mobile’ is closed to new replies.

Tags