Unless I’m mistaken I can’t find a way to set a max width for the entire page in Wix Studio.
I am using “scale proportionally” as my responsive behaviour type for my sections and it is working well, but is an issue on larger monitors where the elements become too big.
I would like to be able to set a max width for the entire page e.g. 1440px.
Currently I can’t even see how to set a max with for a section when using scale proportionally, even under the “advanced sizing” options (see screenshot).
At the moment, I don’t believe there is a way to set it directly on the section itself, as a section is by default a full-width element, which can’t be changed.
That being said, there are a few different approaches you could use. Here are a few:
Add a container to the section. Use the container as the Parent element for everything in the section, and set the container to have a max-width.
Add an advanced CSS grid to the section, and set the min/max width options, so the grid column doesn’t expand beyond a certain measurement.
This wouldn’t work because it’s a class try body tag like that:
body {
max-width: 1440px;
}
Or you can set max width of 1440px for each section you have in your page. And change the background color to something like #FCFCFC which is close to white but not white. (Bad monitors will show it as white btw)
This CSS will effect every section you’ve added in your site so it will limit the section width. I have added one more thing (left) to center the section because it’s left side aligned.
If you want to also limit your footer and header you can add this CSS:
Thanks, this is a step in the right direction, but has created two issues as I have my elements set to scale proportionally.
I have my sections set to scale proportionally which works well up until 1440px. But when the max width is achieved, the height of the section continues to increase which isn’t ideal. Is there a way to stop the height of the section from increasing past 1440px as well so both are locked at the same width/height ratio?
My text elements are also set to scale proportionally which means that they continue to increase in value beyond 1440px. Is there a way for their value to also be set as a fixed value above 1440px?
For 1st question:
You can also set max-height like width in the same block of CSS:
@media screen and (min-width: 1441px) {
.section, .header, .footer {
max-width: 1440px;
max-height: 500px; (change 500px to whatever you want)
left: calc((100vw - 1440px) / 2);
}
}
For 2nd question:
You shouldn’t use scale system in Studio with this max width and heigh because I don’t think you can fix it instead use advanced sizing and set custom sizes. (I also didn’t like this scale thing it’s not working well) Even if there is a solution I don’t know about it.
Hello. Thank you for your solution. This is very helpful.
I have added an anchor menu to my home page using your solution. Any ideas why the anchor menu is outside of my website? I have set my max width size to be 1280px.
