Remove margin/padding from 'Content Left, Sidebar right' content area

[mikewolf1127]

I am using the I’d like to remove the margin above the [content+sidebar] area, and then remove the margins from around the [content] area so I can control them on my own.

I know I can use the No Container/Head/Footer template and create a 3/4+1/4 row and add the widget in the 1/4 column, but I have to do that manually for every page.

If I can use the ‘Content Left, Sidebar right’ template, then I can change the content width in the Layout Settings and every page will reformat automagically.

Can I do this?

[mldarshana]

Hi There @mikewolf1127

Thanks for writing in! Could you please try adding the following CSS rule into your X/Pro -> Theme Options -> CSS area and see if that helps.

.site .x-container.offset {
    margin-top: 10px;
}

Hope that helps.

[mikewolf1127]

OK, that gets rid of the margin right below the menus and to the left of the left green line (see above pic).

But how do I get rid of the padding inside the green lines?

[friech]

Hi Mike,

To remove those padding, please add this to Theme Options > CSS

.page .entry-wrap {
	padding: 0;
}

Hope it helps,
Cheers!

[mikewolf1127]

Great. Now can I control the width of this gutter between the content and the sidebar?

[christian]

Hey Mike,

Here’s a sample code to override the spacing between the Left Content and Right Sidebar. To understand how to use the code, please watch this guide at https://youtu.be/KnSZGmElTY8

.page-template-template-layout-content-sidebar .x-main {
    margin-right: 2%;
}

.page-template-template-layout-content-sidebar .x-sidebar {
  float: left;
  width: 27.536945%;
}

Hope that helps.

[mikewolf1127]

Great! Thank you. Solved.

[thai]

Glad we were able to help