Footer not scaling properly

Site URL: https://ajpgroup.com

Hi, I'm having trouble figuring out how to make my footer not look all weird when the size of the window is changed,  I like the footer on the brabus.com website and wanted to make it like that, if someone could help me, that would be great

Hi @AJPerformance

The content of your footer overlaps on the reduced window size because it does not have enough room to display all columns in a row. You can fix it with the help of below code.

@media screen and (max-width: 1356px) {
    #footer-sections {
        .sqs-layout [class*="sqs-col"] {
            float: none !important;
            width: auto !important;
        }
        .page-section.content-width--medium:not(.content-collection) .content {
            width: 100%;
        }
    }
}

You need to put above code in Custom CSS under Design.

9 hours ago, heyawaiszahid said:

Hi @AJPerformance

The content of your footer overlaps on the reduced window size because it does not have enough room to display all columns in a row. You can fix it with the help of below code.

@media screen and (max-width: 1356px) {
    #footer-sections {
        .sqs-layout [class*="sqs-col"] {
            float: none !important;
            width: auto !important;
        }
        .page-section.content-width--medium:not(.content-collection) .content {
            width: 100%;
        }
    }
}

You need to put above code in Custom CSS under Design.

hi, that worked, thank you! :)