No problem happy to see it’s working!
Just letting you know we do have a current feature request now for this! Studio Editor Request: Setting the Max Width Value of a Site Be sure to follow it, and you’ll be notified once it’s implemented!
2 Likes
This is great, thanks. Is it possible to constrain an individual element or section like this?
Yes why not. I didn’t try it but it should work in my opinion. You can also do this with general element tags like div, p or span.
You’re right! For some reason I thought they blocked this.
Hello everyone!!!.. This is Edu from the future. Thanks everyone, I’m really excited to see a simple and intuitive way to customize CSS on pages! After years wasted trying to customize Adobe Portfolio pages, trying to do something decent for my humble portfolio.
I tried Wix after reading somewhere that I could modify the columns and grid of the base page. It has simply worked as I expected… it’s a shame I don’t dedicate myself professionally to making portfolios for others! I would enjoy the business.
1 Like
Hello
I am new to Wix and I have recently been tring to implement the custom css required to force a max-width on my clients website!
I have followed your code as suggested:
@media screen and (min-width: 1601px) {
.page{
max-width: 1600px;
left: calc((100vw - 1600px) / 2);
}
.section, .header, .footer {
max-width: 1600px;
left: calc((100vw - 1600px) / 2);
}
}
But I am still getting sections moving all over the page. It worked a bit better when i removed the scale proportionately responsiveness but this has flow on effects for the rest of my site further down the break points and seems crazy!
I tried to create a new breakpoint at 1601 pixels to adjust the scale and enforce max-width without effecting smaller breakpoints but the custom breakpoint kept disappearing randomly.
I don’t know where to go form here. One thing I am thinking about is whether i have built the sections on my page wrong. On some sections I can use the container wuthin it to set a max-width, on other sections, the cells are in the section and so I cannot set a max-width.
Is my best plan of action to 
- rebuild all my sections so the layers are:
- section
- container (to manage width)
- then the rest
-
then use the custom css to set the max-page width
-
do also need to rebuild my sections to avoid using the scale proportionately responsiveness option?
If anyone has been in this position that I am and could share the steps they took I would greatly appreciate the advice! Thanks so much
I will check if my code still works and if not I’ll let you know how you can fix it just give me few hours.
does not work for me 
the whole content looks broken
Any news? I’m stuck as well with pretty much the same issue (the details can be found here: Struggling with CSS in order to force a certain screen size (but I'm open to any other solution))
I have checked my codes again and it does work without any problem on my end:
:root {
--scroll-bar-size: 17px;
--max-width: calc(1280px + var(--scroll-bar-size));
--center-sections: calc((100vw - var(--max-width)) / 2);
}
@media screen and (min-width: 1281px) {
.section, .header, .footer, .page {
grid-template-columns: minmax(0px, var(--max-width)) !important;
margin-left: var(--center-sections) !important;
margin-right: var(--center-sections) !important;
}
}
Things to consider:
- Your your screen size is matters. (min-width to work)
- It’ll apply to any section, header and footer and page element.
Here is a live demo site that’s using the code above to limit the screen size to 1280px max.
https://exweiv.wixstudio.io/site
If you want to remove min screen size filter to apply this max width rule you can use the following code:
:root {
--scroll-bar-size: 17px;
--max-width: calc(1280px + var(--scroll-bar-size));
--center-sections: calc((100vw - var(--max-width)) / 2);
}
.section, .header, .footer, .page {
grid-template-columns: minmax(0px, var(--max-width)) !important;
margin-left: var(--center-sections) !important;
margin-right: var(--center-sections) !important;
}
Let me know if these works.
If you add any CSS code below for the same elements they may overwrite these.
Thank you! I’m getting more hopeful now. The benefits are definitely there with the margins, although I’m still noticing the bugs listed below. If we can do something about it, the least I can do is to give you the best answer in my thread, as well as affiliate / link your website on mine if you’re cool with it, and finally, give you some money for the time you dedicated to me. I’m that desperate; you’re pretty much the only hope I have! 
Anyhow, these are the current issues:
- In other screen sizes, the text is still being justified in a weird way, maybe because their font size is way bigger, which takes more space than originally intended.
- Some animations pop up in the wrong places.
- Some images don’t have the correct spacing between them.
- There are long spaces between elements, which shouldn’t be there.
See the images to better grasp the picture.
- 1280 px, as it should look like;
- Using 1920 px on a 1920 px display, as an example of it looking wrong.
I don’t know if this can be fixed again with CSS, or maybe I should do something myself, in the editor? 
I’m not sure how these can be fixed because I’m not sure what is the issue there. It could be due to your settings of display (I mean how you setup things in the editor). I also tested things one of my website in a product page and I didn’t have any of these problems but everything in my page was setup correctly with grids and other details.
If you drag and drop most of the things it can be due to this. And it’s not possible to fix all of these with CSS only.
But if these errors happening because of the code I provided I don’t know the solution for that. Since it’s not a native solution from Wix it may brake other things and maybe that’s the reason of problems you’ve listed above.
Yes, there was no way around it: I had to fix it through the Editor. Thank you very much for your help!
Might be a little late, but what I did is I added another dimension for computer with the max size I want to have, and basically you just have to lock every element to a size and for the second desktop screen, you can have it on scale proportionally or relative width, but make sure that when you stack any element you have to deactivate any relative width if no it will be displace with the size of the screen
I’m hoping this announcement will be just as exciting as it is for us to share, max-width has finally begun rolling out! This was a feature that was requested often, so we’re thrilled it’s finally here! 
See the announcement here
1 Like
where can we find information on how this works now in october 2024?
I found a setting on the page level saying something about page width but it cannot be changed there nor can i find it anywhere on the internet. the link to discord posted by Pamela from the wix team above does not work for me
Here’s the article with more info about the max-width feature - Studio Editor: Setting the Site's Max Width | Help Center | Wix.com