Baskerville 2: content/sidebar widths and spacing

nilla2014 · Member · Jan 30, 2019 at 1:32 pm
Copy link

Add topic to favorites
I’ve been playing around with the content/sidebar widths but can’t seem to get the CSS right. (I’ve removed all now and just left CSS to reduce images in sidebar: Awards)

What I’m trying to achieve:
1. widen content container width but reduce sidebar width in posts.
2. reduce spacing between images in Awards section of sidebar in posts
3. changes to work across all devices.

Many thanks

The blog I need help with is: (visible only to logged in users)
elizazh · Member · Jan 31, 2019 at 10:29 am
Copy link
Hi @nilla2014,

For the width of the content area and the sidebar, please try this (might be working without the “!important” part) and you can adjust the numbers as you wish, as long as they both make up to 100%.
```
body.single .content {
    width: 80% !important;
}
.sidebar {
    width: 20% !important;
}
```
For the margins in the awards section, please try this (again you could readjust the number, currently I put a 0 there)
```
#text-4 img {
    margin: 0 auto !important;
}
```
Cheers,
Eliza
nilla2014 · Member · Jan 31, 2019 at 1:51 pm
Copy link
Hi @ elizazh, thank you for the CSS, which displays great for a desktop. Although, doesn’t work for mobile/tablet devices as it just cuts the display in half.

Also, the #text-4 CSS spacing worked, but has done something strange to the thumbnails in ‘Today’s reader favourites’ for mobile/tablet display – a couple of the images don’t display, so I’ve removed the CSS.

Thank you
elizazh · Member · Jan 31, 2019 at 3:55 pm
Copy link
Yeah this code is for the desktop version. It’d be good to keep the current mobile and tablet version, which, from what I can see, uses 100% width for both content and aside section for max width of 1000px. So maybe you just need to add this code too:
```
@media screen and (max-width: 1000px) {
body.single .content {
    width: 100% !important;
}
.sidebar {
    width: 100% !important;
}
}
```
Actually the margins look nice now, no? Have you done something different?
nilla2014 · Member · Feb 13, 2019 at 3:54 pm
Copy link
Hi @elizazh

Sorry for the delay in response – I had to see to my other self-hosted site I launched before Christmas.

I’ve changed your CSS a little (also removed !important) to make more use of the content space whilst reducing the sidebar, which now displays correctly:

/*container/sidebar*/
body.single .content {
width: 71%;
}
.sidebar {
width: 26%;
}

And…

@media screen and (max-width: 1000px) {
body.single .content {
width: 100%;
}
.sidebar {
width: 100%;
}
}

Many thanks for all your help! Have a wonderful day :)
elizazh · Member · Feb 18, 2019 at 10:51 am
Copy link
Very glad you’ve figured it out!

Cheers :)

No items found.