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

Home Forums Support Make footer widget area 1 full width. Areas 2 and 3 below it and side by side.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #924433
    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!

    #924435
    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 πŸ˜‰

    #924583
    David
    Staff
    Customer Support

    Looks like a good solution to me.

    #925420
    Tim

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

    #925583
    David
    Staff
    Customer Support

    Nope – they’re all short and very specific πŸ™‚

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.