WordPress.org

Ready to get started?Download WordPress

Forums

Twentythirteen Footer Layout (9 posts)

  1. art4life44
    Member
    Posted 10 months ago #

    Hello,
    I am using a modified version of the TwentyThirteen template. It seems that for the footer area you can add multiple widget items. I have 5 widgets I want to include in my footer but the layout/css is forcing the 5th one to a second row. Can anyone tell me how to modify the code so that all 5 columns are an equal width in 1 row?

    Here is my site, you'll see the Location for "research triangle" is the one being forced down to a second line. http://ndi.amdesigngroup.com/investment-opportunities/

    Any help would be appreciated. Thank you!!

  2. esmi
    Forum Moderator
    Posted 10 months ago #

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

  3. art4life44
    Member
    Posted 10 months ago #

    Thanks Esmi but I do have backup version of the template, so no worries there. If you are able to help with my question I'd appreciate any advice you may have there as well. Thanks!!

  4. esmi
    Forum Moderator
    Posted 10 months ago #

    Unless you use a child theme or fork your current customised version of 2013 into a new theme, you will find that people are very reluctant to help here.

  5. art4life44
    Member
    Posted 10 months ago #

    OK I went ahead and created a new theme which the site is now using. Thanks for your advice.

  6. esmi
    Forum Moderator
    Posted 10 months ago #

    You now need to reduce the width of each widget in the footer using CSS.

  7. art4life44
    Member
    Posted 10 months ago #

    I tried that, here is the code I modified, I changed the widths from 200 to 100 and 228 to 128. But there is a weird space inbetween each column which is still forcing the 5th column to a second row. Any other ideas? Thanks!

    .site-footer .widget {
    background: transparent;
    color: #585858;
    float: left;
    margin-right: 0px;
    width: 200px;
    font-size: 12px; border-right:1px solid #ddd;
    }

    .sidebar .site-footer .widget {
    width: 228px;
    }

  8. esmi
    Forum Moderator
    Posted 10 months ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  9. art4life44
    Member
    Posted 10 months ago #

    I tried that, I disabled all of the CSS and it didn't remove any of the spacing. It looks like some sort of local CSS is being applied to each of the 5 columns. Here is the code, it looks like it's giving it a "top:280px". Do you know where that is coming from????

    <aside style="position: absolute; top: 280px; left: 795px;" id="text-4" class="widget widget_text masonry-brick">
    <div class="textwidget">
    Research Triangle
    308 W. Rosemary Street
    Chapel Hill, NC 27516
    919-928-8005 (tel)
    919-928-8006 (fax)
    </div>
    </aside>

Reply

You must log in to post.

About this Topic