Home Forums Lorina Pro Footer sections displaying differently on PC vs cell phone

Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #11856
    kristincali
    Participant

    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.

    #11859
    Andy
    Keymaster

    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;
    }
    #11887
    Andy
    Keymaster

    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;
        }
    }
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.