Create Full width footer widgets?

  • Unknown's avatar
    goodhopesam · Member ·

    Hello,
    My site currently has 2 side by side footer widgets.
    Is there any way to make them full width with one on top of the other?

    Currently: 1 | 1

    Desired: 1 (full width)
    1 (full width)

    I am hoping that this will look better aesthetically and will stop the widgets from shrinking horizontally (to only 1/3 slivers) in phone mode – they were changed from 1/3 to 1/2 and look great on computer but mess up in phone mode.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    crimeapoint2 · Member ·

    Hello

    Try to add css:

    @media (max-width:767px){
    .col-lg-4.footer-widget {
    width: 100%;
    }
    }

  • Unknown's avatar
    goodhopesam · Member ·

    Hello crimeapoint2,
    I have put in your code with the other stuff that was there and it definitely makes them a column instead of a row and the phone version looks better. Thank you very much.

    However, on the website the two embedded widgets are not quite wide enough. The calendar goes 80-90% and the map only 70-75%. Any way of making them have the same width at the 100% level?

    The current CSS is this:

    .col-lg-4.footer-widget {
    width: 100%;
    }

    .col-lg-4.footer-widget:last-of-type {
    width: 100%;
    }

    @media (max-width:900px) {
    .col-lg-4.footer-widget {
    width: 100%;
    }
    }

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, there is some padding on the left and right of the widgets and the first rule below gets rid of that. The second rule is to fix the map. The code that comes in from Google is based on the original widths so we have to force it to 100% width. I also increased the height from 215 to 315px as it looked a little skinny. 

    #colophon .footer-widget-area .footer-widget {
  padding-left: 0;
  padding-right: 0;
}
#colophon .footer-widget-area .footer-widget iframe {
  width: 100%;
  height: 315px;
}
  • Unknown's avatar
    goodhopesam · Member ·

    Thanks fellas,
    This makes it look terrific on both laptop and phone platforms.

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Create Full width footer widgets?’ is closed to new replies.