How do I constrain my site to a certain width if viewed on huge screens?

Support
#1

I’m trying to create a site with Pro and I can’t figure out how to make my site “full width” if viewed on a small device like an iPhone or iPad (or just a narrow browser window on a PC), but have it be constrained to 1000px wide in the center of the browser window if viewed on a huge screen (like a 5K monitor).

It would seem that the option to do this is in Theme Options, Layout & Design. But if I set my site to Fullwidth then the Site Max Width option doesn’t do anything.

I guess maybe I need to set my site to Boxed, but then how do I get rid of the awful default fuzzy grey borders on the right and left sides of the site? I looked and there seems to be no option for this.

#2

Hi Ben,

Thank you for writing in, you’re right the option that you’re looking for is the Theme Options > Layout and Design > Site Max Width, please note though, that if you set your Section’s Row to Global Container Off, this Site Max Width will not apply to those Rows.



That means your site’s containers width will not pass that max limit if your site is view on wide screens. Adjust it where you see it fits.

Set the second option Site Width to 100% if you want your containers to go fullwidth on mobiles.

Please add this to Theme Options > CSS

.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
	box-shadow: none;
}

Happy holidays,

#3

Thank you for your thorough reply.

I did find that setting the custom CSS partially worked – the box shadow disappeared, but not the grey border-left and border-right. I had to define like this for it to totally disappear:

.x-boxed-layout-active .site, .x-boxed-layout-active .x-site {
     box-shadow: none;
     border: none;
}

Is there some reason that this border appears by default in the “Boxed” layout? My expectation is that if I choose the template with “No Container” then I’ll just have a blank white canvas to start. But for some reason in the Boxed setting, this weird gray border appears left and right.

#4

Hi Ben,

Yes, we need that CSS to reset the border too. Borders and box shadows are part of boxed settings. It is on the stack CSS so to reset it, custom CSS is needed. That is how it is setup by default.

#5

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