Docs

[Ann]

Hi there,

I have added a 4-widget footer to my site http://www.parronhall.com and when viewed on smaller device, before the mobile view, the widgets all jump to one vertical line. Is there anything I can do to keep the 4-widget width all the way to mobile width? Or at least have them jump two a 2-widget width before mobile? All that grey makes it look really weird. (screen shot 1)

Also, for the last widget (the contact form), the header appear to be in the third widget. I added two columns in that widget and I’m not sure if that’s what messing it up. (screen shot 2)

Any help to make it look better would be highly appreciated!

Thanks so much!

Ann

[Lely]

Hello Ann,

Thank you for the screenshot. Please add the following custom CSS on Appearance > Customize > Custom > Edit Global CSS:

@media (max-width: 979px){
footer.x-colophon.top .x-1-4:first-child {
    margin-right: 2%;
}
footer.x-colophon.top .x-1-4:first-child, footer.x-colophon.top .x-1-4:nth-child(2) {
    width: 49%;
    float: left;
}
footer.x-colophon.top .x-1-4:nth-child(2)>div,
footer.x-colophon.top .x-1-4:nth-child(3)>div {
    margin-top: 0 !important;
}
footer.x-colophon.top .x-1-4:nth-child(3),
footer.x-colophon.top .x-1-4:last-child {
    clear: both;
}
}

See attached screenshot of the result.

Hope this helps.

[Ann]

You guys are soooo awesome!!!

Thank you! Works perfect 🙂

[Rue Nel]

Hey There,

You’re welcome! We are just glad we were able to help you out.
Thanks for letting us know that it has worked for you.

Cheers.

[Author]

Posts