Column images stacking on mobile

  • Resolved Jessica

    (@jessica-korteman)


    2 years, 3 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. I have also asked this question here before and received an answer that worked at the time, but now the problem has returned (perhaps after a WordPress update). I have checked that the code is still there but it just doesn’t seem to override what I need it to anymore.

    The existing code is this:

    /**Logos 2x2 formation**/

.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;
}

/**Reducing spacing between logos**/

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

    Many thanks in advance for any assistance you can provide.

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

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

  • I have also asked this question here before and received an answer that worked at the time, but now the problem has returned (perhaps after a WordPress update).

    I’m the bloke that provided that code some 3 months ago.

    The code doesn’t work anymore, not because of a WordPress update, but because of some changes in the website.

    If you look at the code you’ll see the numbers 12, 16, 20, and 22. These are the internal identifiers of the columns that the code was targeting to give you the desired layout.

    But all four column IDs have changed on your website, making the code totally ineffective. I can’t say how the IDs got changed, but it’s certainly not caused by a WordPress update!

    Below I’ve updated the same code, but with the new IDs of the columns. Kindly update the code and let me know how it goes.

    /**Logos 2x3 formation**/

.home .wp-container-13.wp-block-columns, .home .wp-container-17.wp-block-columns, .home .wp-container-21.wp-block-columns {
flex-wrap: nowrap !important;
margin-bottom: 0;
}

/**Reducing spacing between logos**/

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

    Standing by.

    Thread Starter Jessica

    (@jessica-korteman)

    Hi George,

    Fantastic – this worked! Thank you very much!

    And thank you for explaining. It’s great to know this isn’t caused by a WP update, I guess it must have been caused by a theme update as I haven’t changed anything else.

    It has also meant that the three images in the footer, which I believe you also helped me with at the time, are now stacked on mobile as well. I’d like them all on one line in all instances. I’m assuming the same issue has occurred here? Could you please tell me the correct container it should be so I can update the code?

    /**Logos Right Footer one line**/

.wp-container-26.wp-block-columns {
flex-wrap: nowrap !important;
margin-bottom: 0;
}

    Thank you kindly!

    I’m assuming the same issue has occurred here? Could you please tell me the correct container it should be so I can update the code?

    Yes, and the new container ID is 27. So just change the 26 to 27.

    Thread Starter Jessica

    (@jessica-korteman)

    Brilliant! Thank you SO much!

    Wishing you a wonderful festive season.

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

Tags