Min width in window resizing

user_343201 0
Viewed 174060

I have a webpage with a fluid layout with a 100% width.

When I resize browser window the elements in the page overlap.

I would create an effect similar to this website http://bologna.bakeca.it/ that when window is smaller than a fixed width stop resizing.

window-resize css html
3 Answers

Use @media in CSS

Take a look at @media CSS at-rule.

You can use @media screen and (max-width: ...px) and @media screen and (max-height: ...px) and set with of your html component to keep you're page always up to the value you choose. After, if you want users can access the masked content of your page set overflow:auto.

You can't prevent user resize his browser under this values but you're web page will never go under the values you select.

For example, for minimum width = 330px and minimum height = 400px, the CSS can look like :

body{
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 330px){
  html{
      width: 330px;
      overflow: auto;
  }
}
@media screen and (max-height: 400px){
  html{
      height: 400px;
      overflow: auto;
  }
}
user_116308060
Related