Archived topic

How to line up footer widgets side by side in mobile view

5 replies · Started by kiant123 on June 6, 2020

Viewing posts 1–6 of 6

June 6, 2020 at 9:16 am #1317011

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!

June 6, 2020 at 4:23 pm #1317324

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?

June 7, 2020 at 1:16 am #1317595

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!

June 7, 2020 at 6:51 am #1317867

Hi there,

try this CSS instead:

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

June 8, 2020 at 12:52 am #1318728

Worked perfectly! Thanks David.

June 8, 2020 at 4:23 am #1318932

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.