Hello,
I have 4 widgets in my footer, which presents well. I add this code to split my footer in 4 and be able to have this 4 widget side by side, and not above and below.
#footer-widgets .widget:lang(en-GB) {
width: 25%;
}
#footer-widgets .widget:lang(de-DE) {
width: 25%;
}
#footer-widgets .widget:lang(es-ES) {
width: 25%;
}
#footer-widgets .widget:lang(fr-FR) {
width: 25%;
}
However, when I check my website on a mobile or even a tab, widgets are overlapping (text from twitter mostly), and on mobile, the widgets are put one top of each other and they are not using the width screen of the mobile. A quick check on my website will allow you to understand better than my explanations.
If you have a solution to have a nice footer on laptop and on mobile too, that would be great.
Thanks.
Olivier
Footer’s issue with mobile view
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Olivier
Try changing your Custom CSS to:
@media (min-width: 680px) { #footer-widgets .widget:lang(en-GB) { width: 25%; } #footer-widgets .widget:lang(de-DE) { width: 25%; } #footer-widgets .widget:lang(es-ES) { width: 25%; } #footer-widgets .widget:lang(fr-FR) { width: 25%; } }Let us know how that goes.
Hello Andrew,
Thanks, that worked perfectly!
Super, glad we could help :)