Edin theme – reduce sidebar width on post pages

pragmaticcommunication · Member · Aug 2, 2017 at 5:50 pm
Copy link

Add topic to favorites
I’m using the Edin theme and have the CSS upgrade. I’m looking for code to reduce the width of the right sidebar and increase the width of the post content and pages only.

(The right sidebar doesn’t display on the main page, and I like the current layout of the main page.)

An example of a post is here: https://pragmaticcompendium.com/2016/11/03/the-1-rule-a-minority-with-too-much-free-time-or-representative-of-the-99/

An example of a page is here: https://pragmaticcompendium.com/rhetoric/

Thank you in advance for your help!

The blog I need help with is: (visible only to logged in users)
lastfarthing · Member · Aug 2, 2017 at 8:40 pm
Copy link
Hi @pragmaticcommunication,
You can adjust the width of the sidebar in your theme by using the following css:
```
#secondary {
	width: 128px;
	margin-right: 0px; }
```
This shouldn’t effect your front page. The width doesn’t have to be 128px, you can set it to whatever you like. The wider you make it the smaller the gap will be between the right edge of the post content and the left edge of the sidebar.
pragmaticcommunication · Member · Aug 2, 2017 at 8:58 pm
Copy link
lastfarthing,
Thanks for your response!

That code worked GREAT for reducing the width of the sidebar – but my overall goal was to increase the width of the content. Since the content width didn’t increase to fill the space that was gained, the gap between the right edge of the post content and the left edge of the sidebar is larger than I need it to be.

I didn’t realize the sidebar width would be set in px – I guess I assumed that with a responsive template, it would be a percentage, like 80% content, 20% sidebar.

Thanks again!
juliannekb · Member · Aug 2, 2017 at 9:02 pm
Copy link
@pragmatticcommunication, you can change the width of your content with this:
#secondary.widget-area{
width:20%;
}
#primary.content-area {
width: 60%;
}

and it is in percents. (If the two add all the way up to 100, then there will be no margin between the two.)

However, when I’m testing this, it DOES change the width of my home page, which is set to full-page templates. I’d try it on yours and see if it works only for sidebar pages.

I’m looking into how to specify a certain group of pages only for the CSS code, but haven’t figured it out yet!
lastfarthing · Member · Aug 2, 2017 at 9:33 pm
Copy link
@pragmaticcommunication,
Oh, sorry about that. Try this:
```
#secondary {
	width: 10%;
	padding: 0 0 0 0;
	margin: 0 0 0 0; }

#primary {
	width: 90%;
	padding: 0 0 0 0;
  margin: 0 0 0 0; }
```
You can swap out % for px or em pretty much anywhere you want :)
pragmaticcommunication · Member · Aug 2, 2017 at 11:18 pm
Copy link
juliannekb and lastfarthing,

THANK YOU!

I used lastfarthing’s code and took into account juliannekb’s note that if the two added all the way up to 100, then there would be no margin between them.

I set the secondary width to 20% and the primary width to 70% and it is EXACTLY what I wanted to do!

THANK YOU THANK YOU THANK YOU! You saved me HOURS of searching and trial and error!

No items found.