Changing widget width in footer of twenty thirteen theme

  • Unknown's avatar
    stmaryschoolsherman · Member ·

    How do I change the widget width of a text widget in the footer area of a Twenty Thirteen theme?

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

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hi there,

    You should be able to change the width of the footer widgets with the following CSS:

    div.textwidget {
	width: px;
}

    Can you let me know a bit more about the look you’re trying to accomplish? Currently it seems like you have three different widgets in the same area. Are you trying to combine that into one widget and not have it wrap?

  • Unknown's avatar
    stmaryschoolsherman · Member ·

    I would like one text widget, centered, that spans the width of the footer. I want to place the name, address, phone, and copyright on one line.

    After I posted my question, I did go in and insert three text widgets, but that is not the smooth look I would prefer.

  • Unknown's avatar
    stmaryschoolsherman · Member ·

    Me again. I used the CSS that you provided and it worked like a charm! Thanks so much!

    Now, can you tell me if there is a way to make the text be centered in the footer? If not, I can live with this but centering would be nice.

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hi!

    After consulting with some CSS experts on our team, there’s actually a better way to do this! The previous method messes up the mobile layout. Can we do this instead?

    First, replace the content in your Text Widget currently with the following:

    <p class="school-address">St. Mary's School, 727 S Travis, Sherman, TX 75090 — (903) 893-2127 — ©2014 St. Mary's Catholic School</p>

    Then, remove the CSS we entered before (setting the width) and replace it with this:

    .school-address {
	text-align: center;
}

#text-6 {
	width: 100%;
}

    There are several benefits to using this method, but the major one is that the mobile layout on your site will look great still!

  • Unknown's avatar
    stmaryschoolsherman · Member ·

    Woo hoo! It works perfectly. Thank you so very much. One more problem solved. I hope others find this as useful as I did.

    Just out of curiosity, could I do the same thing to center the menu? That probably requires a new thread, but thought I’d ask before I tinker with the css.

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hi!

    Great! I’m glad that footer widget magic worked.

    Regarding the main menu, it looks like that’s already centered by default. Perhaps I’m misunderstanding what you’re looking for?

  • Unknown's avatar
    stmaryschoolsherman · Member ·

    After looking more closely, I realized It seems a little off-center because of the light appearance of the search area on the right. It is actually the person I am designing the site for who asked this question, and that was before I added more items to the menu bar. Now that the menu is fuller, it looks more centered.

    On my own blog, http://pieceocakeblog.com/, the same thing is going on but it doesn’t bother me. Even though the menu items are heavier on the left, the 2-column set-up makes it appear more centered. So, not a problem. Thank you for your time!

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hi!

    The search bar is an included element when looking at the menu centering. You’re definitely correct – If you just were to look at the actual menu labels, it appears a bit off. But, when you look at the search bar included, the whole thing is centered.

    I’m glad we got the footer widget area worked out though! Please let me know if you need anything else.

  • The topic ‘Changing widget width in footer of twenty thirteen theme’ is closed to new replies.