Mobile Responsive Issues with Footer Widget Area

[USAT009]

Hello,

I’d like to set the widget areas to be:

• 4 column at 980 and above
• 2 column between 979 and 481
• 1 column at 480 and under

by default, it does the first and last of those.
The 2-column area in the middle is what it’s not doing out of the box.

Thank you!

Jesse

[ruenel]

Hello Jesse,

Thanks for writing in!

To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@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;
    }
}

This custom code will make sure that the 4 column area will collapse into 2 columns between 979 and 481 screen sizes.

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

[USAT009]

Thank you! It worked.
Weirdly though, the second widget doesn’t top-align with the first widget.
The third and fourth align fine, but the 1st and 2nd stagger.
Any ideas on that one?

Jesse

[friech]

Hi Jesse,

Please add this block to the code provided by Ruenel

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

Hope it helps,
Cheers!

[USAT009]

yes that worked perfectly!

[christian]

Glad it helped.