Misaligned Footer Widgets on Mobile

Support
#1

I used the code below to make the widgets go two per row on medium mobile widths.

@media (min-width:481px) and (max-width: 979px) {
    .x-column.x-md {
        float: left;
        width: 48%;
        margin-right: 4%;
    }
    
    .x-column.x-md:nth-child(2n),
    .x-column.x-md.last, 
    .x-column.x-md:last-of-type {
        margin-right: 0;
    }
}

I found this in another forum, but it didn’t work for some reason.

.x-colophon.top #custom_html-3 {
    	margin-top: 0;
}

Misaligned mobile footer
Misaligned mobile footer748×394 63.3 KB

Any advice?

#2

Hello Jesse,

Thanks for the very detailed post information.

The issue is because of this custom css:

.x-colophon.top .x-column:first-child .widget:first-child {
    margin-top: 0;
}

Please have your custom css updated and use this:

@media (min-width:481px) and (max-width: 979px) {
    .x-column.x-md {
        float: left;
        width: 48%;
        margin-right: 4%;
    }
    
    .x-column.x-md:nth-child(2n),
    .x-column.x-md.last, 
    .x-column.x-md:last-of-type {
        margin-right: 0;
    }

    .x-colophon.top .x-column:first-child .widget:first-child {
       margin-top: 3em;
    }
}

We would love to know if this has worked for you. Thank you.

#3

perfect, thank you

#4

You are most welcome!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.