Topic:
Struggling with CSS in order to force a certain screen size (but I’m open to any other solution)
Product:
Wix Studio
What are you trying to achieve:
I made a website with the three “default” screen widths in mind, so 1280 px (desktop), 768 px (tablet) and 390 px (mobile), but as you can easily guess, the text, animations and graphics are all over the place if I’m using any other resolution. I’d rather not touch anything in the drag and drop editor if it’s time consuming, although I’m open to use a band aid solution. One example, is to make it so that ANY device forces those three sizes, via global.css, so as a max-width command. If it’s not possible to do all three, then I would even settle with forcing just the 1280 px on every device. I tried this, but there are still many errors, and that’s why I’m asking you if it’s possible to add something else into the equation. Unfortunately I can’t edit the pages in another resolution, say, 1920 px, because that would screw up the rest of them and viceversa.
I know Wix is working on a Studio Editor Request called “Setting the Max Width Value of a Site”, but that was one year ago and there are no updates. What can be done in the meantime?
Anyway, in the images below you have:
- How the website should look like (1280 px)
- How the website looks like on a 1920 px screen
- A possible solution (aligned to the center, with margins)
Of course, you can scrap everything I said if you think there are better solutions.
Thank you very much.
What have you already tried:
- Contacting Wix Support
- Using a parent container for everything inside a page and force the size on that one (for some reason, in the Levels section on the left-side menu, it doesn’t let me drag and drop the other elements inside it).
- Some CSS commands, like the following. They worked, but not perfectly. There are still many errors (even while testing other responsive behaviors. Result: they don’t work either).
@media screen and (min-width: 1281px) {
.section, .header, .footer {
max-width: 1280px;
max-height: 800px;
left: calc((100vw - 1280px) / 2);
}
}
Additional Information:
I’m not a web developer, so bear with me!
-
How the website should look like (1280 px)
-
How the website looks like on a 1920 px screen
Imgur: The magic of the Internet -
A possible solution (aligned to the center, with margins)
Imgur: The magic of the Internet
Keep in mind that it’s not just the footer: every page has text clipping inside other text, animations not working as intended, images superimposed on one another…