P.sidebar overlapping featured images after sidebar width increase in CSS- 2014

  • Hi- I am new to wordpress and I’ve been trying to set up a relatively basic blog site (www.uberearth.com).

    I needed to increase the width of my primary sidebar to accommodate wider than average widgets (including twitter). I did this by creating a child theme and coping the following code into the CSS file:

    @media screen and (min-width: 1008px) {
    #menu-left-sidebar-menu{
    font-size:14px;
    line-height:20px;
    text-align:left;
    width:200px
    }

    #secondary{
    width:240px
    }

    .primary-sidebar .widget .widget-title{
    font-size:18px;
    font-weight:500;
    margin-bottom:1px;
    margin-top:-20px
    }
    .site:before {
    width: 300px;
    }
    }

    However, if you visit my site you can see that the sidebar now overlaps the page content (in this case, the featured image). This problem is easiest to spot on my ‘about’ page. How do I get the main content to respond to the new width of the sidebar? Ideally the content of the main blog area needs to be completely visible and central to the new dimensions.

    It seems like it should be simple, but I’m at a bit of a loss!

    Any help would be fantastic- Hannah.

    https://www.uberearth.com/

Viewing 3 replies - 1 through 3 (of 3 total)

  • add something like:

    .site-content, .site-main .widecolumn {
margin-left: 300px;
}
    Thread Starter uberearthadmin

    (@uberearthadmin)

    Thank you so much alchymyth, that has worked perfectly!! However, I have now noticed (not as a result of your coding) that the sidebar is also appearing behind the top menu… Easy to spot if you begin to scroll down the webpage and notice the top menu move, revealing hidden sidebar content. Is there a way I can prevent this by happening- increasing the top margin on the sidebar?

    Thanks again for your help!!

    I am not too familiar with the script behind the menu behaviour in Twenty Fourteen – possibly try posting in the theme’s forum at https://www.ads-software.com/support/theme/twentyfourteen/ to get theme specific suggestions.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘P.sidebar overlapping featured images after sidebar width increase in CSS- 2014’ is closed to new replies.