[Resolved] Make footer widget area 1 full width. Areas 2 and 3 below it and side by side.

[Tim]

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 😀

Thanks as always for the amazing product!

[Tim]

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 😉

[David]

Looks like a good solution to me.

[Tim]

Thanks David, unless you have a better class/classes to target or other advice I reckon this one is “Resolved” 😀

[David]

Nope – they’re all short and very specific 🙂

[rex wickham]

This doesn’t seem to work any longer, have the CSS selectors changed?

[David]

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.

[Author]

Posts