How do I prevent my web page from being resized smaller than a certain size?

Question

Basically, I don't want the layout and formatting on my page to become nonsensical if the user resizes the browser to a really small size. After a certain limit, the page should not get any smaller as the user resizes the browser to a smaller size. The page should stay the same size and any overflow should be hidden or use scrollbars or whatever. I tried setting min-height on the body but this had no effect at all.

btw, I am already using media queries and they're nice but don't do what my boss wants.

The only think I could think of was to make some sort of element with a fixed size and that would prevent the page from getting smaller than that element.

Answer 1

This is where a media query and CSS will come in handy! (Assuming you already know how to use CSS)

The media query allows you to change the styling of an HTML page based on the size of the screen by using CSS (if you know any CSS).

Use it like so (but place this below all of your CSS code):

@media only screen and (max-width:480px){
     //The elements you want to change here
}

As an example, any CSS code you place in this query will apply to your page if the screen width is less than 480 pixels. You could also use min-width, max-height, and min-height for this too.

Example scenario:

div {
   width:600px;
   height:400px;
}

@media only screen and (max-width:600px){
     div {
         width:100%;
         height:50%;
     }
}

In a case like this, if the user is in a browser window or phone with a width of less than 600 pixels, the div will take up half of the screen.

So, instead of trying to prevent things from getting smaller, make them bigger on smaller screens and windows.

There is a more in-depth article here.