1 row 6 column to 2 row 3 column

[zklaw]

Hello,

I am not able to find css that works to change the 1 row 6 column container to a 2 row 3 column. I’m using images in each column. And I would like this break to happen for 767px and below.

dev.toledolaw.com

Thank you.

[basanta]

HI There

Thanks for writing in!

Please add this css to your customizer CSS.

@media (max-width: 767px) {
#x-section-3 .x-container.marginless-columns .x-column[class*="x-"] {
    display: inline-block;
    width: 30%;
    vertical-align: inherit;
     text-align: center;
}
}

@media (max-width: 480px) {
#x-section-3 .x-container.marginless-columns .x-column[class*="x-"] {
    display: inline-block;
    width: 50%;
    vertical-align: inherit;
     text-align: center;
}
}

Let us know how it goes.

[zklaw]

@basanta

s to your customizer CSS.

Thank you for the response. Unfortunately, that fix didn’t do anything.

[nabeel]

Hi again,

I tested the code in developer’s tool and it’s working as expected (see screenshot)

It looks like you’re using a cache plugin and the I see the content is being served by the cache that’s why the changes are not reflecting on the front end. Make sure to clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.and If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

Thanks.