How to make McKinley Footer widgets wider?

  • Unknown's avatar
    icelawproject · Member ·

    As you can see on my site, I have three widgets in the footer area and I would like to make one (the twitter feed) take up the space of the two remaining columns so I don’t have blank space. Is there a CSS code I could use to change the width of the twitter feed? I’ve been trying all sorts of code ideas that people have suggested on the forums with no luck, but I am a brand new beginner at css. Any help very much appreciated.

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

  • Unknown's avatar
    lizthefair · Member ·

    I’m not sure CSS can solve your problem (although someone with more fu than I might come up with something) but if what’s really bugging you is the blank space, you could move the twitter widget to the first column and make it taller, then move your contact info to below the “follow” widget. That would at least make the columns basically equal in height.

  • Unknown's avatar
    icelawproject · Member ·

    Thanks for responding so quickly. I have decided to try a new approach where I make the entire footer one column and stack the contact info and logos in rows within that column, if that makes sense. I’m now trying to figure out how to make that one big column! Any suggestions would be very welcome.

  • Unknown's avatar
    lizthefair · Member ·

    If that’s possible with CSS, I don’t know how to do it. I’ll mark this thread for staff review and hopefully we’ll both learn something new.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, the widgets have a position: absolute we can override and then set the widget widths to 100%, which will cause them to stack one on top of the other regardless of the browser window/device width. To do that, add the following CSS.

    .site-footer .widget {
    position: static !important;
    width: 100%;
}

    You can then add text widgets with the logo and contact info. If you keep the two follow widgets they will float to the left.

    Just in case you need it, here are some links to more information on using text widgets.

    Text Widget
    Text Widget Links
    Linking Images

  • The topic ‘How to make McKinley Footer widgets wider?’ is closed to new replies.