WordPress.org

Forums

Twenty Fourteen
Widen the Sidebar (4 posts)

  1. Foxsch
    Member
    Posted 1 year ago #

    Hi, I just installed and have started using the Twenty Fourteen for the first time. Normally a fairly simple piece of .css to track down - but with 2014, I can not find the lines needing to be changed to widen the left main sidebar?

    Any Ideas?

    https://wordpress.org/themes/twentyfourteen/

  2. mrtom414
    Member
    Posted 1 year ago #

    It looks like there are two media queries where the width is reset.

    #secondary { width:122px;}

    and

    @media screen and (min-width: 1008px) {
    #secondary { width:162px;}
    }

  3. Foxsch
    Member
    Posted 1 year ago #

    Hi mrtom - Many Thanks for Posting ~ Yes ~ I have tried adjusting the second entry you posted there:

    @media screen and (min-width: 1008px) {
    #secondary { width:162px;}
    }

    but that adjusts the content within the sidebar - widen that value and the text stretches without word-wrap, and is lost as it moves over beyond the sidebar sizing.
    I cannot find a 122px value for #secondary, as you have it exactly there in my stylesheet? But there are these:

    (line 3225) #secondary,
    	#supplementary {
    		padding: 0 30px;
    	}
    
    	.content-sidebar {
    		border: 0;
    		float: right;
    		margin-left: -33.33333333%;
    		padding: 48px 30px 24px;
    		width: 33.33333333%; (?)
    	}
    
    (line 3596) #secondary {
    		background-color: transparent;
    		border: 0;
    		clear: none;
    		float: left;
    		margin: 0 0 0 -100%;
    		min-height: 100vh;
    		width: 122px;
    	}
    
    (line 3928) #secondary {
    		width: 162px;
    
    	.secondary-navigation,
    	.secondary-navigation ul ul {
    		width: 222px;
    	}
    
    	.secondary-navigation ul li:hover > ul,
    	.secondary-navigation ul li.focus > ul {
    		left: 202px;
    	}

    You'll notice the width value of the block at 3596 corresponds to your #secondary {width:122px} - I have tried adjusting this value - no change. Also the % value I question-marked - again, no change - its got me stumped.

  4. johanna2patricia
    Member
    Posted 10 months ago #

    Hi Foxsch,
    I struggled with it too. Found it at line 3965:
    .site:before {
    width: 222px;
    }

    Change that to the width you want in your child style.css

    Johanna

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic