Using a fixed width site for Desktop that won't scale out past 1280 px width

Question:
I want to set up my site to not expand in width past the Desktop view’s breakpoint of 1280 px wide. If I drag the preview handles to see what my site looks like in an ultrawide browser window, it looks terrible no matter how I try to tweak individual responsive behaviors on dozens of screen elements. I just want content to stay as-designed at the fixed 1280 px Desktop size even if the user’s browser is much wider.

Product:
I’m new to Wix. I initially started building my site in (what I now understand is) the “Wix Classic” platform, and I didn’t realize anything different existed. Then I started reading about “Editor X” as the newer/better editor, so I tried to switch to that to see if the UI was a little more polished, and eventually learned that Editor X has already been replaced by Wix Studio, which has an even higher learning curve with all the responsive capabilities built in.

Even though my site was behaving as expected in Wix Classic (keeping a fixed width no matter how wide the browser window became—except for elements like Image Sliders that I did want to play across 100% of the width of the viewport), I read that eventually Wix Classic/Editor X would be forced to migrate to Wix Studio—perhaps within weeks or months at most. Since I was learning Wix from scratch to begin with, I figured it would be smart to just make the switch now and restart my learning with Wix Studio, since that appears to be the future for Wix.

What are you trying to achieve:
Now that I have most of my site rebuilt in Wix Studio, I’m following tutorials to try to get a handle on individual responsive elements that cascade DOWN to Tablet and Mobile breakpoints. But there doesn’t seem to be any obvious solution or any tutorials on how to stop entire Wix Studio web pages from falling apart when a viewer scales UP from the default Default width of 1280 px. I personally use a wide 4K monitor with a full-width browser window, and my site looks horrifying at that scale. I’ve tried setting paragraphs to wrap and other elements to remain fixed (trying to avoid scaling), and it just turns everything into a circus—including my site logo flying off the top of the page no matter what I do. Site behavior was fine on Wix Classic with very wide viewports, but I do not see a way to set the width to a maximum amount in Wix Studio.

What have you already tried:
I did find one other discussion thread where a helpful user posted some custom CSS code that is meant to fix the width of Desktop sites at a maximum value. I enabled Developer Mode on my site and pasted the code into the CSS section of my site, but it doesn’t seem to work, and also shifts my site content to the left of the viewport as the browser window widens, where I want my content locked to the center of the viewport with a maximum width of 1280 px.

Additional information:
I hope I am doing something very basic wrong, or missing an obvious setting, since I’m brand new to Wix and not much of a “developer”. If there’s no built-in way to cap the width of a site design for wider windows, I would be astonished—especially since it worked really well in the less-advanced Wix Classic editor.

This layout is critical to the function and aesthetic of my site—if it can’t be adjusted natively in the Editor and I can’t get any custom CSS code to band-aid it, I would hate to have to look into other platforms and start the learning (and design process) over again.

1 Like

Can you share the CSS code you used?

I also found this thread, not sure if it’s the same one you referenced:

Yes, that’s the code I used. For some reason, it didn’t work for me.