How to change page width in Fantawood Light theme

samguev · Member · Aug 20, 2013 at 7:25 am
Copy link

Add topic to favorites
This is my first post here and also English isn’t my language, sorry for the mistakes.

I use Fantawood Light theme and got Custom CSS. The theme uses responsive width, but it looks too much narrow for me, and I haven’t got to change it, don’t find the code to apply.

The blog I need help with is: (visible only to logged in users)
mrdirby · Member · Aug 20, 2013 at 4:23 pm
Copy link
Are you trying to change the width when responsive or at full size?
samguev · Member · Aug 21, 2013 at 9:37 am
Copy link
At full size, I have not much knowledge about this stuff, I’m a novice, but wanted at least to increase the width for pc screen.
mrdirby · Member · Aug 21, 2013 at 5:06 pm
Copy link
You can experiment with this css to edit the main width. It is currently set to 920px.
```
#page {
max-width: 920px;
}
```
thesacredpath · Member · Aug 21, 2013 at 5:17 pm
Copy link
This will widen it. The original max-width was 920px. You can make it any size you want it. You will have to create a new header image that is the same width as your chosen width below (height is up to you) and upload that header image and then click the “use as is” button instead of cropping it.
```
#page, #main-navigation, #masthead {
max-width: 1200px;
}
```
samguev · Member · Aug 21, 2013 at 7:20 pm
Copy link
Thanks to both
thesacredpath · Member · Aug 21, 2013 at 9:09 pm
Copy link
You are welcome.

@mrdirby, I should have refreshed before posting. :)
mrdirby · Member · Aug 21, 2013 at 9:43 pm
Copy link
@thesacredpath I’m glad you updated. I didn’t know the main-navigation and masthead should be included.
thesacredpath · Member · Aug 21, 2013 at 9:54 pm
Copy link
NP @mrdirby, and thanks a lot for the help in the CSS forum. Glad you are here. :)
mrdirby · Member · Aug 22, 2013 at 2:58 pm
Copy link
@thesacredpath, you’re welcome. I’m actually interested in becoming a happiness engineer. So trying to get some experience under the belt.
thesacredpath · Member · Aug 22, 2013 at 5:31 pm
Copy link
@mrdirby, that was how I got started. :)
samguev · Member · Aug 23, 2013 at 7:54 pm
Copy link
It worked, but I would try another thing, if it’s possible.

How can I change the ratio sidebar-main content? I mean to narrow sidebar to widen main content.
mrdirby · Member · Aug 23, 2013 at 9:03 pm
Copy link
It looks like this theme uses a right margin to set the width of the main content and a width for the sidebar. Both use percentages so you can play around with what you like best.

This should give you an idea.
```
.site-content {
margin: 0 18% 0 0;
}

.site-main .widget-area {
width: 15%;
}
```
thesacredpath · Member · Aug 23, 2013 at 9:05 pm
Copy link
This takes the sidebar from 25% width down to 20% and widens the content by reducing the right margin by 5% from 33 to 28%.
```
.site-main .widget-area {
    width: 20%;
}
.site-content {
    margin-right: 28%;
}
```
samguev · Member · Aug 24, 2013 at 5:10 am
Copy link
Yes, it works perfect! Again, thanks to both for your help.

I hope to learn something and not have to ask each step :-)

No items found.