Make a boxed site full width on mobile devices

Support
#1

Hey guys. My problem is pretty straightforward. I want my site to be boxed on desktop but full width on mobile. Is there some css I can add to accomplish this? I went through other posts but nothing worked.

#2

Hi There,

Thank you for writing in, you can add this to Theme Options > CSS

@media (max-width: 768px) {
	.x-container.main {
		width: 98%;
	}
}

Adjust the 98% value if you feel the content is too close on the edge.

Hope it helps,
Cheers!

#3

Thanks. The objects within containers is still pretty small. Is there a way to affect those as well?

#4

HI There,

Please update the previous CSS to this:

@media (max-width: 768px) {
	.x-container.main,
	.x-container.max.width.offset {
		width: 98%;
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}

Hope it helps :slight_smile:

1 Like
#5

it did. awesome as always.

#6

Thanks for letting us know that it has worked for you.

#7

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