Pro Footer Column Moving When Adjusting Broswer

[mikeshudson]

Hi,

My footer columns aren’t displaying correctly whenever the browser viewport is adjusted. I’m sure it’s just something to do with the Flex Box CSS, but I just cant work it out. Whenever I adjust the viewport, the content item in the third column moves over into the second column…

Site included in secure note.

MH

[Prasant]

Hello @mikeshudson,

Thanks for asking.

Upon checking the website, it’s actually the third column that’s causing the issue. Please try adding following CSS under Pro > Theme Options > CSS and see how it goes:

.tg-grid-holder {
    left: auto !important;
}

Thanks.

[mikeshudson]

Great, thanks! And how do i get the three columns to collapse on smaller devices? Currently they remain as three columns side-by-side even on mobile…

[paul.r]

Hi,

To make it stacked it mobie, you can add the code below in Header > CSS

@media(max-width:767px) {
.x-colophon .e11240-1.x-bar-content {
    -webkit-flex-direction: column;
    flex-direction: column;
}
}

Hope that helps

[mikeshudson]

Thanks for this. Instead, I used fill space equally and removed the max-width on the column so they take up equal space and stack on mobile automatically.
Thanks again.

[rad]

You’re most welcome and glad it’s okay now Cheers!