Sidebar & Site content Width

Hi there!

I’ve been struggling with the width of my sidebar and the site content. I want the sitebar to be a bit smaller, so I can display my products better in the site content. I’ve used this code, to maximize the size of the sidebar:

.x-sidebar { max-width: 275px;

This does make the sidebar a bit smaller. Unfortunately the website content doesn’t get wider. It just forms a bigger space between the product photos and the sidebar. Could you please help me in this matter?

The shop content should be a bit wider so the white space between the sidebar and the content is used (where the blue arrows are). It should come up to about the blue vertical line I’ve drawn in the image. The sidebar is set to max 275 px, that’s fine.

I can only provide a screenshot, since I’m making these changes on my localhost at the moment for testing purposes.

Hope for your help! Thanks in advance :slight_smile::speak_no_evil:

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

body .x-sidebar {
    width: 255px;
}

body .x-main {
    width: calc(100% - 280px);
}

Hope it helps :slight_smile:

@thai Sorry for the late reply. This works like a charm! Thank you so much :slight_smile:

1 Like

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.