[Resolved] How to line up footer widgets side by side in mobile view

[a1reno]

Hi,

As the title says how would I line up footer widgets so that they line up side by side in mobile view rather than just sitting one on top of each other?

Also since, I was asking about my footer I noticed something very small. How do you make the ‘C’ in .com a small ‘c’. I have written it out as a small ‘c’ in the text but it seems to come out big. This isn’t a big issue but something I’d thought i’d point out.

https://share.getcloudapp.com/RBuq1ZP8
https://share.getcloudapp.com/Z4uYxDzm

Thanks in advance!

[Leo]

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .footer-widget-1.mobile-grid-100, .footer-widget-2.mobile-grid-100 {
        width: 50% !important;
        float: left;
        clear: none;
    }
}

As for the C issue in the copyright, do you have text transform set to Capitalized in Customizer > Typography > Footer?

[a1reno]

Hi Leo,

Thanks for the code. It was working really well until I decided to add another widget! Would you be able to send the code again for 4 widget footer instead of 3? Sorry about that!

And yes, it was on capitalize in the footer so that is now fixed!

[David]

Hi there,

try this CSS instead:

@media (max-width: 768px) {
    .inside-footer-widgets>div.mobile-grid-100 {
        width: 50% !important;
        float: left;
        clear: none;
    }
}

[a1reno]

Worked perfectly! Thanks David.

[David]

Glad we could be of help

[Author]

Posts