Docs

[owenb]

Hi, my blog is at owenbillcliffe.co.uk/blog/ and I noticed that while I set content % width in Customiser, that’s not actually the width of the content in the blog etc – there’s a gap between content and sidebar that’s an odd percentage width, that I can’t seem to set anywhere, that makes the actual % width of content and sidebar turn out really crazy like 68.79803% or similar. Can that gap be set to a round number percentage somewhere? Or is it a set pixel width gap hardcoded into the theme? Not the end of the world, just frustrating to my pseudo-OCD tendencies! 😉

[Paul R]

Hi,

There no percentage set for the gap.

The content is floated to the left and your sidebar is floated to the right.

When you set your content width, the sidebar width is calculated from that and the remaning percentage is the gap.

To reduce the gap, you need to set your sidebar width manually by adding this in Custom > Edit Global CSS in the customizer

body .x-sidebar.right {
       width: 25% !important;
}

Change 25 to adjust spacing.

Hope that makes sense

[owenb]

Hiya,

Okay, but I’m confused! If the content width is set to 72% in the settings, then when I Inspect Element for the content of a blog it should say 72% for the width? But it says 68.79803%.

So I’m a bit lost! You said “the sidebar width is calculated from that and the remaning percentage is the gap” – what is the sidebar width calculated as, then? A percentage, or a fixed width which is converted to a percentage?

[Darshana]

Hi there,

Can you try adding the following CSS rule and see.

.x-main {
    width: 72% !important;
}

Let us know how it goes.

[owenb]

This worked, so I expanded the code to the sidebar, and also used padding-right and padding-left codes on the main and sidebar respectively to get it looking exactly how I want.

Out of interest, is there a ‘web standards’ reason why the Customiser doesn’t allow content more than 74% wide? Is it just because you feel a sidebar will be too cramped at anything less than 26% (plus padding)?

[Rad]

Hi there,

It’s not a web standard, but stack standards. Example, Icon stack content width is calculated to sidebar’s fix width (pixel), while Renew Stack is primarily based on content width (percentage). There should be a max width to give room for Renew’s sidebar. It’s only normal to allocate width on a sidebar.

It only looks compressed because your entire site’s layout max width is 1000px. And 22% of 1000px is 220px which is small. Percentage value varies depending on its container size. The 1000px is smaller or equivalent to a tablet size, it will really look compressed having a sidebar.

Thanks!

[owenb]

Okay, so it turns out if I use those codes for setting the main content and sidebar to percentages with padding right and left, it messes up the responsive views, so I just deleted it and went back to whatever Renew is doing by default.

So, I still can’t work out where it’s setting the width of the gap between the content and the sidebar. Whatever I set the content percentage to in customiser, that’s *not* the percentage is showing up in Inspect Element. It’s always a weird percentage with 5 decimal places. And I can’t see any padding or margin being set to produce the gap, so I can’t do something like add a border directly halfway across the gap, neatly dividing my content and sidebar, if you see what I mean?

[Rad]

Hi there,

There is no margin or padding. That space is due to remain percentage from the content and sidebar’s total width. Float left and float right column will leave space between then without the need for padding and margin.

100% – ( 70.04803% + 23.54803% ) = 6.40394%

Hence, there is a remaining 6.40394% (gap size) that you can add to the content width or sidebar width. But you can’t add it to both of them at the same time. Hence, if we like to reduce the gap by 3% ( allowing 3.40394% gap size ), then it’s either add it to the content width or sidebar width.

Here are the variants.

.x-main {
    width: calc(70.04803% + 3%) !important;
}

or

body .x-sidebar.right {
       width: calc(23.54803% + 3%) !important;
}

or both, but divide the 3%

.x-main {
    width: calc(70.04803% + 1.5%) !important;
}
body .x-sidebar.right {
       width: calc(23.54803% + 1.5%) !important;
}

You should add these CSS within @media ( min-width: 768px ) { } so it wont affect mobile columns.

Thanks!

[Author]

Posts