Help with Footer Widget Sizing

[DesignMunky]

Would you guys be able to help me with some responsive formatting of my Footer Widgets?

http://lyonsdemoz.net/opl/

As you’ll see I have 4 footer widget areas. As the screen width reduces, I’d like the 4 widget areas to first break down to 2 x 2…then eventually all stacked on top of each other.

Thanks
Darren.

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
    .x-colophon.top .x-column.x-md.x-1-4 {
        width: 50%;
        float: left;
        margin-top: 25px;
    }
    .x-colophon.top .x-column .widget:first-child {
        margin-top: 0;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

Hope it helps

[DesignMunky]

Hi,

Thanks - I added the CSS but it seems to jump straight from 4 columns down to 1 and does not get to the 2 x 2.

Darren.

[rad]

Hi @DesignMunky,

You mean that it should stay 1 column in mobile and then 2 columns for tablets? Because that’s the only way to gradually change the column counts. And you didn’t provide information to which breakpoints should the column changes. For the meantime, please change that CSS to this

@media ( min-width: 768px ) and ( max-width: 979px ){
    .x-colophon.top .x-column.x-md.x-1-4 {
        width: 50%;
        float: left;
        margin-top: 25px;
    }
    .x-colophon.top .x-column .widget:first-child {
        margin-top: 0;
    }
}

The CSS means to apply the 2 columns structure for tablets and smaller devices ( except mobile smaller than 768px ).

Thanks!

[DesignMunky]

Thanks for helping out with this. I’ve decided to upgrade to PRO for more flexibility. It’s much easier!

Cheers,
D.

[ruenel]

You are most welcome!