Outer spacing on content area

[Brad_NZ]

Hello

How do I add outer spacing to the content area so it matches the 2em outer spacing I have in header and footer areas?

Thanks for the help

[christopher]

Hi Brad,

You will need to be far more descriptive so that we know what you are talking about. I checked your licenses page and I could find only one website which I added to the Secure Note, and on that website, I see no different between the header and footer and the content area regarding the spacing.

Please get back to us with the URL of the website you are talking about and screenshots and desciprtions to know what you are talking about.

Thank you for your understanding.

[Brad_NZ]

Hi Christopher,

Yes that is the correct URL.

Sorry I missed that the issue is only noticeable on mobile devices.

As you scale the “About Us” page, you will see what the issue is. The header and footer retain the 2em left and right outer space, but the actual content area has no outer space.

Hope this helps.

Mobile

[friech]

Hi There,

Thank you for the clarification, please add this to Theme Options > CSS

@media (max-width: 1300px) {
	.x-container.max {
		max-width: calc(100% - 2em);
	}
}

To learn more custom CSS, you can inspect your site using Chrome’s developer tools to see the styling that is applied to an element and then using custom CSS to override it. You can find more info on how to check for CSS selectors here. Then information about writing your custom CSS here.

Please clear your browser’s cache after adding the code, to see the changes immediately.

Hope it helps,
Cheers!

[Brad_NZ]

Thanks

Had to add !important to get it working

@media (max-width: 1300px) {
	.x-container.max {
		max-width: calc(100% - 2em) !important;
	}
}

[paul.r]

Hi,

Glad you were able to figure it out.

Have a nice day!

[Brad_NZ]

The CSS styling above didn’t give me the right result across all screen sizes, so have opted for below. Now works the same way as the header and footer areas.

article.page {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	font-size: 16px;
}
article.page::before, article.page::after {
	-webkit-flex-basis: 2em;
	flex-basis: 2em;
	width: 2em;
	height: 2em;	
}
.page::before, .page::after {
	content: "";
	-webkit-flex-grow: 0;
	flex-grow: 0;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;	
	display: block;
	pointer-events: none;
	visibility: hidden;
}

[ruenel]

Hey There,

It’s good to know that you have figured out a way to resolve your issue.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.