Reduce size of sidebar

If you find this tweak helpful:


Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

Elegant Themes does a great job of making beautiful themes using the widely accepted "Golden Ration" in their layouts. In the Chameleon theme this rule is applied to the amount of space given to the content and sidebar - roughly two-thirds for content and one-third for the sidebar. If you're a rule breaker and hate to see all that wasted space on the sidebar, this tweak will borrow that space and allot it to the content area. There are a lot of moving parts in this tweak. If things don't quite line up, it's likely due to another plugin, especially any sidebar widget plugins.  You may have to play around with the numbers in the code below but it will work on stock Chameleon. 


Locate your style.css file in /chameleon-child/

Add this code:

#content {
padding: 0 0 60px 30px;
background-position: 735px;

#left-area {
width: 700px;
padding-left: 5px;

.post {padding: 35px 0 25px 0;}

.post p {padding-right: 20px;}

.post {margin-right: 20px;}

#sidebar {
width: 222px;
float: left;
padding-top: 35px;
padding-left: 0;

.widget {
width: 170px;
padding-left: 30px;
padding-right: 0;

Because this opens up so much more room for your content, you could also justify the text to make for a more appealing layout. If you do this, you'll want to add a little extra padding to the right side so it matches the left. Change the ".post p" in the code above to this to justify your text and add the padding:

.post p {
padding-right: 30px;
text-align: justify;

    1 Comment

  1. “Golden Ratio.” “Ration” is a portion of food, Ratio is a measurement.


    January 23, 2018

Post a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This