WordPress.org

Forums

[resolved] Sidebar overlaps footer in TwentyThirteen (10 posts)

  1. MarkHedley
    Member
    Posted 1 year ago #

    Hi, I have found a few others who have had this issue with the TwentyThirteen theme but as yet have no resolution.

    If the sidebar content is longer than the main content then it overlaps into the footer. See http://www.themaynard.net/weddings/civil-partnerships as an example.

    I am guessing/hoping it can be resolved by modifying the CSS but despite numerous attempts I cannot resolve it.

    Thanks in advance of any help.

  2. Lance Willett
    Themer
    Posted 1 year ago #

    Hi Mark,
    Looks like that site isn't running Twenty Thirteen. Edit: wow, nice modification, didn't recognize it right away. :)

  3. Lance Willett
    Themer
    Posted 1 year ago #

    This is by design: the footer is "overlayed" on the content area on purpose with a bit of transparency.

    With the particular changes to Twenty Thirteen seen on that site you linked to, however, it does look like a bit off.

    The way it's supposed to work is the sidebar extends all the way down to the very bottom of the viewport, including the footer.

  4. creativenicci
    Member
    Posted 1 year ago #

    Your sidebar has its position set to absolute. When it's absolute, the parent container doesn't stretch to contain it. This is so that you can position it wherever you want without affecting any other elements. Here are the CSS overrides you need (to override existing CSS, put this at the end after all of the other styles) so that the parent container stretches with the sidebar.

    #main {
    overflow: hidden; /* needed to stretch parent container since children are floated */
    }

    #primary.content-area {
    width: 68%;
    float: left;
    }

    .site-main .sidebar-container {
    position: static;
    float: right;
    width: 30%;
    height: auto;
    }

    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    padding: 0;
    }

  5. MarkHedley
    Member
    Posted 1 year ago #

    Creativenicci, you are a star and a life saver. That worked perfectly although I had to wrap it in a @media (min-width: ... to ensure the normal responsive design still worked

    @media (min-width: 999px) {
    	#main {
    		overflow: hidden; /* needed to stretch parent container since children are floated */ } #primary.content-area {
    		width: 68%;
    		float: left;
    	}
    	.site-main .sidebar-container {
    		position: static;
    		float: right;
    		width: 30%;
    		height: auto;
    	}
    	.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    		padding: 0;
    	}
    }

    Thankyou very much

  6. MarkHedley
    Member
    Posted 1 year ago #

    Best close this now!

    Once again thanks to @Creativenicci for your help

  7. Iurie Malai
    Member
    Posted 1 year ago #

    This is what I have used:

    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
       padding: 0px 20px 0px 20px;
       max-width: 100%;
    }
    
    .sidebar .site-footer .widget-area {
        max-width: 1040px;
        left: 0px;
    }
    
    .hentry {
       padding: 20px 0px;
    }
    
    @media (min-width: 999px) {
    
       #main {
          overflow: hidden;
          margin: 0px auto;
          max-width: 1080px;
       } 
    
       #primary.content-area {
          width: 68%;
          float: left;
       }
    
       .site-main .sidebar-container {
          position: static;
          float: right;
          width: 30%;
          height: auto;
       }
       .site-main .widget-area {
          margin-top: 24px;
          margin-right: 20px;
       }
    
    }
  8. Evitalo
    Member
    Posted 1 year ago #

    Hi! I'm a designer and it's my first WP. So be patient, please.
    I've copied what @flegmatiq has post and it've worked in a child template. But, here comes my question if the images at the main page are aligned to the left or to the right they are cutted. Why happens that?
    I'm still working on localhost,

  9. ali_777
    Member
    Posted 1 year ago #

    .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
    padding: 0px 20px 0px 20px;
    max-width: 100%;
    }

    .sidebar .site-footer .widget-area {
    max-width: 1040px;
    left: 0px;
    }

    .hentry {
    padding: 20px 0px;
    }

    @media (min-width: 999px) {

    #main {
    overflow: hidden;
    margin: 0px auto;
    max-width: 1080px;
    }

    #primary.content-area {
    width: 68%;
    float: left;
    }

    .site-main .sidebar-container {
    position: static;
    float: right;
    width: 30%;
    height: auto;
    }
    .site-main .widget-area {
    margin-top: 24px;
    margin-right: 20px;
    }

    }

    Thanks very much flegmatiq;
    I think testing was absolutely right, and it's the thing that i was looking for about 2 days. Thanks again. :)

  10. damiroquai
    Member
    Posted 9 months ago #

    This was mind bugling for me too ;) That's why I created a simple java script plugin that removes last widget or widgets from sidebar until sidebar height is equal as a content height.

    It works by default with Twenty Thirteen theme. It's called sidebarAutomizer and can be found at wp repository - http://wordpress.org/plugins/sidebarautomizer/

Topic Closed

This topic has been closed to new replies.

About this Topic