Row gap width/height is adding margins to columns?

[tkulow]

Hello, I was working on a blog post and my margins were off despite the settings being the same as my other pages. After some experimenting I realized that the row gap width/height column is adding margins all sides columns which is causing things to be misaligned.

Any ideas on what might be happening here?

[prakash_s]

Hello @tkulow,

Thanks for writing to us.

In order to help you with your concerns we need to check your settings I would suggest you please share the exact page URL so we can check it on our end and guide you.

Thanks

[tkulow]

Hello @prakash_s,

Here is a URL to one post, but it is happening with all my posts.

https://sandbox2.eri-wi.org/are-social-security-benefits-taxable/

[ruenel]

Hey @tkulow,

Set your width and maximum width of your Row element.

May I ask why 300 pixel is the gap width?

Best Regards.

[tkulow]

Hello @ruenel,

I set gap width/height to 300px to make it easier to find why it was off by 20px on top/bottom/sides.

I’ve set the widths of the row element, things are otherwise unchanged.

[tristup]

Hi @tkulow,

Please let us know if you are still facing the issue.

Thanks

[tkulow]

Hello @tristup,

I am still facing this issue.

[tristup]

Hi @tkulow,

In that case, can you please provide any screenshot marked with the issue or any video that helps us to recognize the problem? I would also request you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[tkulow]

Hi @tristup,

I’ve attached 2 images, one one where it is not working (adding outside margins) and where the gap is working.

[ruenel]

Hey @tkulow,

Normally, when you have a 300 pixel gap, it should only look like this:

On your WP install, both the top/bottom left and right have some gaps in them. Could you please update the X theme and Cornerstone plugin to the latest versions first?

• X theme 10.4.19 - X Version 10 | Themeco Docs
• Cornerstone 7.4.19 - Cornerstone Version 7 | Themeco Docs

Kindly let us know how it goes.

[tkulow]

Hello @ruenel,

I’ve updated the plugin and theme however it’s still not working.

[ruenel]

Hey @tkulow,

I have investigated the issue further and I found out that you have added this custom CSS:

.post-template-default .x-row:not(.post-header) .x-row-inner, .x-colophon.top .x-container.max {
    margin: auto;
    max-width: 1400px !important;
}

I just could not find where you have added this CSS code. Your Global CSS in the Theme Options is missing too. I am sure this is where you have added the CSS code.

Best Regards.

[tkulow]

Thanks @ruenel,

I’ve found the CSS and see what you mean, my next question would then be if there’s a setting to remove the post container (similar to the page attributes Template setting).

I would like the section background color to reach to the edges of the screen.

[ruenel]

Hey @tkulow,

You are using the X theme and the single post will always have a container. If you want to get rid of the container, you can check out this old thread:

• Adjusting CSS on sidebar to make it flush - Support - Themeco Forum

@Rad has given a custom CSS that you can use to get rid of the container in your single blog post layout.

Best Regards.

[tkulow]

Hello @ruenel,

Thank you, that resolved the gap issue, however it appears there’s still something strange happening with the margins. In this case, the .x-row-inner has a negative margin and is pulling content off the page/out of alignment. I’ve changed the gap to 30px.

[ruenel]

Hello @tkulow,

Those margins are correct. The negative margin of the x-row-inner compensates for the gap between the columns. It is only right that the Row element does not have any gaps on the left and right of the browser window because you have set the width of the Content to 100%.

To fix this issue, you can simply add a left and right padding of 1rem to your Row element. Remember that you added this custom CSS for the header:

body:not(.archive) .entry-header,
#eri-social-share {
  padding: 0rem 1rem 0;
}

Or the best way is to set the width of the Row element to calc(100% - 3rem).

I made some changes to the page just now. Please check it.

Cheers.

[tkulow]

@ruenel,

I see, thanks for explaining it to me so thoroughly. I think that’s resolved things for me, thanks again for your help and have a great day!

[ruenel]

You are most welcome, @tkulow.