Super slim Sidebar: How do I change the width of the sidebar/content area?

[theHCC]

Hello,

I am looking achieve a super slim sidebar.

Summary

I am looking to achieve a sidebar similar to this
https://saffronavenue.com/blog/design-shop/how-to-easily-set-and-achieve-your-goals-with-an-organized-printable-goal-planner/

My current website page for reference: http://www.hirehenri.com/uncategorized/3-0-e-commerce-checklist/

Here is the code I have added to CSS, I would like to sidebar text to be very slim, similar to the reference link.

.x-main {
width: 60%;
}
.x-sidebar {
width: 10%;
}

The problem I am having is making the content area larger without overlapping the grey area. When I edit the .x-main { width: 60%;}, it changes the width but overlaps the grey. I would like to keep with width to 60 and have the width of the grey background minimize to 12 or 15%.

[ruenel]

Hi @theHCC,

Thanks for writing in!

Please be advised that you do not need the custom css to adjust your sidebar. Simply go to X > Theme Options > Layout & Design > Content Width and insert 90. This setting will give you a 90 percent content width and a 10 percent sidebar width.

But if you insist of using a custom css, you will have to update your code and use this instead:

.x-main {
    width: 60%;
}

.x-sidebar {
    width: 10%;
}

.x-content-sidebar-active .x-container.main:before {
    right: 10%;
}

.x-sidebar-content-active .x-container.main:before {
    left: 10%;
}

Hope this helps. Kindly let us know.

[theHCC]

Thank you.
The bar made me assume I couldn’t go past a certain percentage.

[ruenel]

You’re welcome!
We’re glad we were able to help you out.