How to change the size of content vs sidebar in Profile theme

glutenfreelifesaver · Member · Jan 13, 2015 at 1:13 pm
Copy link

Add topic to favorites
Hi,

I don’t know css, and have been searching through the forums and on google to find a code for altering the width of my content vs sidebar on site http://www.thankheavens.com.au

I can’t seem to find anything that suits the Profile theme. I have tried a few codes that do more harm than good.

I would like to use one sidebar on most pages/posts, yet two sidebars on others. I feel that the sidebar vs content ratio leaves too little room for the content, and would like to make the content wider compared to the sidebar(s)

a) how do I do this/ what code do I use?
b) will such changes affect the adaptability of my site to tablets/phones?

Thanks for your time!

Regards,
Kristine

The blog I need help with is thankheavens.com.au.

The blog I need help with is: (visible only to logged in users)
hallluke · Member · Jan 13, 2015 at 9:46 pm
Copy link
Hi Kristine,

Try adding this code to your custom CSS, it should make your main content area slightly wider and your sidebar a little narrower – but without affecting the layout when viewed on mobile devices.
```
@media only screen and (min-width: 768px) {
  .row .eight {
    width: 70.2%;
  }
  .row .four {
    width: 25.37%;
  }
}
```
You can change the percentages values around if you like as long as you increase one by the same amount as you decrease the other.

I think almost everything still looks good on mobile and tablet screens except for the welcome message in your sidebar – because it is an image it shrinks down to be almost unreadable on small screens. You might want to consider replacing the image widget with a text widget and just typing out your message – that way the font will scale with the device and no-one will have to squint!
glutenfreelifesaver · Member · Jan 14, 2015 at 11:48 am
Copy link
Thank you so much, that worked a charm! And I’ll take your advice on the welcome msg too :)

Any idea what to do on posts or pages that have two sidebars (split)? I haven’t published one yet, because it comes out pretty ugly.. the content is super narrow and sidebars quite far towards the centre on both sides.

I thought I’d use split sidebars only on certain posts/pages.. can I use css to regulate these separate to the regular one-sidebar-pages?

Thanks a million!

Kristine x
thesacredpath · Member · Jan 14, 2015 at 9:52 pm
Copy link
If you wish to customize the three-column pages, you can use one of the unique body classes with the individual classes and IDs to limit the changes to just the three-column pages. This would be an example of setting the right sidebar to the same width as the left, and widening the content column. .row .four is the right sidebar, and .row .five is the content column.
```
.page-template-template-three .row .four {
    width: 21.679%;
}
.page-template-template-three .row .five {
    width: 47%;
}
```
glutenfreelifesaver · Member · Jan 16, 2015 at 1:15 pm
Copy link
Thanks a lot! I can’t say I understand what that means, but do I just copy and paste that code into the css module?

Cheers!
thesacredpath · Member · Jan 16, 2015 at 9:21 pm
Copy link
Yes, copy and paste it into the CSS editor below what you have in there now.
glutenfreelifesaver · Member · Jan 16, 2015 at 9:25 pm
Copy link
Thanks a lot for your help!
glutenfreelifesaver · Member · Jan 16, 2015 at 9:55 pm
Copy link
I’m doing something wrong.. I paste in the code that I want, and I see the changes come to life in the “customize” editor. When I press save changes, they are still visible; only when I refresh the page or open a new one, all the changes are gone.. every single time

Am I supposed to do something other than just press “save”?
thesacredpath · Member · Jan 17, 2015 at 2:03 pm
Copy link
No, if the code is being stripped out on save, it typically means there is a syntax error in the code somewhere.

The code I gave above should be placed at the very bottom below the other CSS, after the ending } bracket on the previous code @hallluke gave. If you can put up a page with three columns, I can double check the code and take a look from within your customizer to see what is happening.
glutenfreelifesaver · Member · Jan 21, 2015 at 11:36 am
Copy link
Thank you for your help,

I’m gonna get some css help with fixing all the little problems on my site all at once. I’m hopeless at this :) Thanks anyway

-Kristine
thesacredpath · Member · Jan 21, 2015 at 9:45 pm
Copy link
Kristine, you are welcome.

No items found.