How do you adjust content width manually if you use a sidebar?

Hi there,

the Layout Elements > Content width control applies to all the content so would effect the width of the content and the sidebar combined.

What are you trying to achieve? A reduced content width without effecting the sidebar?

The problem I am having is that the sidebar width only adjusts in increments of 5%, so if I wanted 27% for the sidebar width, how will I achieve that please?

You would need some CSS like this for the right sidebar adjustment:

@media(min-width: 769px) {
    #primary {
        width: 73% !important;
    }

    #right-sidebar {
        width: 27% !important;
    }
}

thanks David that is excellent, exactly what I was looking for, another thing could you please tell me what does "! important" mean in the CSS code that you provided above?

So the sidebars and content already have CSS properties to set their widths. The !important is a way of making our CSS more important to override it. In this instance its probably not required as an #ID selector would have more specificity ( importance ) then the themes CSS.

thanks for that super info and one more thing does this "!important" property if used, does it effect pagespeed or SEO score?

Nope - doesn't make any impact on SEO/Performance - i generally try to limit the use of !important but, unlike this case, its not always possible.

thanks David that's awesome to know! :)

You're welcome