Changing sidebar and content width of Penscratch Theme

emmaloeskow · Member · Jun 28, 2015 at 11:39 am
Copy link

Add topic to favorites
Hey all! I am trying to add some css to change the width of my content and sidebar. I have managed to do so to a degree but it is not quite right. I want to make the white spacing between the background and the content smaller if that makes sense? So that my picture is more to the right with less white space. I think maybe this is called padding? In a nutshell I just want want the white border to be smaller so my content has more room :)

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Jun 29, 2015 at 9:21 am
Copy link
Hi there.

That’s right; padding has to do with that! :) If you want to have a little schema with a diagram showing the terminology (margin, border, padding…), you could check this from W3C: http://www.w3.org/TR/CSS2/box.html (Of course, if you have any doubts about, just ask us)

So I propose you to decrease current horizontal padding (currently 108px) for the .site area (.site box following W3C terminology). You could try with 28px, for instance, to gain 80px on each side, just adding this to your custom css.
```
.site{
    padding-left: 28px;
    padding-right: 28px;
}
```
But… this will make your title not to be centered respect to the content, so you could add a margin to the left of your header if you want this effect. (I propose 80px, the same width we picked from the padding)
```
.custom-header {
    margin-left: 80px;
}
```
(Of course you can modify proposed values to try and get the customization that best suits your needs).

I hope this helps.
emmaloeskow · Member · Jun 30, 2015 at 6:22 am
Copy link
Oh my gosh thank you so much! I spent hours trying to fix this haha (CSS newbie). Love your work!
staff-jeanpierreac · Staff · Jun 30, 2015 at 7:04 am
Copy link
That’s nice @emmaloeskow!!

haha

Enjoy blogging! :)
andybojarski · Member · Jul 15, 2015 at 9:37 pm
Copy link
Hi I tried this and it did not work for me…I have the Gazette theme..the site is http://www.andybojarski.com. I’m not good with CSS and new to it…what I want is to have the main column width to be 870 pixels for all my posts, the same 870 pixels as it it for all the pages…if you notice when you click on any page on my site, the text is all the way to the left and no white area on the left..with the sharing buttons on the bottom…but if you click on any post, it has the sharing icons on the left and the content width is narrow leaving a lot of white space on the left as you scroll to read the blog…I want all this moved to the left like in a page format and the sharing icons to be on the bottom like they are with the page setup…basically, I want all my posts to look like my pages with regards to width of the columns..how can I do this in a simple way without complicated CSS…if CSS is needed, can you tell me exactly what needs to be done…thank you so much for all your help…
thesacredpath · Member · Jul 16, 2015 at 7:44 am
Copy link
Hi @andybojarski, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.
andybojarski · Member · Jul 16, 2015 at 2:18 pm
Copy link
Of course, thank you and sorry for asking in the wrong forum…have a wonderful day :)
thesacredpath · Member · Jul 16, 2015 at 7:16 pm
Copy link
@andybojarski, no worries and thanks.

No items found.