Archived topic
Make footer widget area 1 full width. Areas 2 and 3 below it and side by side.
6 replies · Started by Tim on June 9, 2019
Hi,
I think this should be easy with some CSS but I can't quite find it.
What I want is Footer widget area 1 full width of the screen and widget areas 2 and 3 to be width of 50% (side by side) under it.
Widget area 1 will have MULTIPLE small images/badges. 2 & 3 will be simple text ie. address and contact details etc. (Using either multiple image widgets in the widget area or a single visual editor widget in the area containing multiple widgets!)
I guess I could do this with a hook to generate_before_footer_content <?> but would be more comfortable with css if possible.
Still in development on my desktop so no live site to review unless essential :D
Thanks as always for the amazing product!
Hmmm Actually, I think this works!
.footer-widget-1 {
width:100%;
padding-bottom:5%;
text-align:center;
}
.footer-widget-2, .footer-widget-3 {
width:50%;
padding-left:10%;
padding-right:10%;
}
.widget_media_image {
display:inline;
}
@media (max-width: 768px) {
.footer-widget-2,
.footer-widget-3 {
width:100%;
padding:0;
text-align: center;
}
}The .widget_media_image selector worked to stop separate images stacking in footer widget 1.
Needed the media query because otherwise it looked "funky"* on a tablet/phone.
Am I missing something? Not sure it is particularly elegant.....
*Recognised official Australian term ;-)
Looks like a good solution to me.
Thanks David, unless you have a better class/classes to target or other advice I reckon this one is "Resolved" :D
Nope - they're all short and very specific :)
This doesn't seem to work any longer, have the CSS selectors changed?
Hi there,
this is an old topic and before Flexbox was introduced to the theme.
Can you raise a new topic and share a link to your site and i'll provide you with the correct CSS.
