Footer sections displaying differently on PC vs cell phone

[kristincali]

I have 3 footer sections and on a computer they display correctly. On a phone they are crunched up to the left, not spaced out and centered. I want them to be centered. I hope that makes sense. My site is KristinByTheOcean.com if needed.

[Andy]

With 3 columns on larger screens, the footer sections will display in 2 columns on smaller screens such as tablets, and then 1 column on phones as they don’t have the same width so will look really squished if still in 3 columns and if each column has a lot of content.

If you want to change this, add this Additional CSS to make the mobile display keep the same layout as larger screens:

.footer-112 .footer {
    width: 22% !important;
}

.footer-112 .footer:nth-child(3) {
    width: 47% !important;
    clear: none !important;
}

[Andy]

Further update: there is a small error where on some phone sizes the footer sections are not going to full width as they should.

If you need to keep the responsive footer layout for phones but correct this issue, please use this ‘Additional CSS’ instead of the code I wrote earlier:

@media only screen and (max-width: 480px) {
    .footer {
        width: auto !important;
    }
}

[Author]

Posts