Full Width Text Padding/Margin on Mobile

[matjnewton]

Hey guys

Simple question – my site is tourtiger.com.

On the full width text box, for responsive situations it looks terrible – there’s a stack of padding or margin on the right hand side and I don’t know how to fix it. Any help?

Wordpress and Theme versions are current as far as I can tell.

Everything else is perfect;

Mat

[Kyle – SUPPORT]

Hi

It’s because you have this in your custom css:

.alt-bg {
	margin: 10px 0;
	margin-left: -210px!important;
	padding: 10px 210px;
	border-top: 0px;
	border-bottom: 0px;
	-moz-box-shadow: inset 0 0 5px rgba(0,0,0,0);
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
	box-shadow: inset 0 0 5px rgba(0,0,0,0);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
}

Doesn’t look needed to me, please remove

– Kyle

[matjnewton]

Hey Kyle

Thanks for the response

I removed it and it opened up a big white gap on the left.

If you try it in Chrome Dev Tools it should be repeatable

Mat.

[Kyle – SUPPORT]

It should be this:

@media only screen and (min-width: 1024px) { 
.alt-bg {
    margin-left: -1000px!important;
    padding: 10px 1000px;
}
}

– Kyle

[matjnewton]

I have literally zero idea as to why that worked, but it did, so.. thanks.

[Kyle – SUPPORT]

Great! No problem 🙂

– Kyle