阻止页面的所有内容调整大小

Question

I'm trying to prevent all of the content on the page from moving, resizing while width page is under 1350 px. Min-width doesn't work for this and i don't know why.. so what can i do ?

Btw on my css code, for the width, height, transformation: translate , i'm using the value vmax , and not px or % . So the min-width maybe doesn't work with it, all of my elements keep resizing because they are using vmax , so they just adapt there size with the window size too.. :(

I tried this too, but still don't work :(

body {
    min-width: 1350px; 
}

The code + preview

(I'm trying to stop resizing the three white rectangle in priority when my browser width is under 1350px, but if we can tell to the page to stop resize all of the content when she is under 1350px, and only use a scrollbar to deplace the elements on the page, it will be cool !)

See this page for exemple , when she is less than some px, the page stop from resizing and a scroll bar appear, i want the same result but i don't know how to do it ...

Answer 1

you are using css dimensions that are relative to the viewport. vmax vmin, vh, vw are relative to the viewport and thus react to resizing of the window. if you want fixed dimensions, you should use em or rem

edit: if you want to prevent the white boxes from resizing, you could add a min-width: 450px so they can grow but don't shrink beyond a point

Answer 2

vmax is not related to document size, but to actual browser size. Maybe absolute units like px , rem , em are a better solution in this case.

Answer 3

For contional css, based on the specific width of the window, you can use media-queries:

@media only screen and (max-width: 1350px) {
    body {
        background-color: lightblue;
    }
}

That way, you'll be able to define sepcific rules for each resolution / rule that you want.