Collapsible Page Layout

HTML & CSS
1

Hey folks,

I wanted to design a site where it expands / collapses depending on the individuals screen resolution. Basically, I have set the container to have side margins (left/right) of 50px, and it expands to within 50px of both sides dependent on the individuals resolution, however the problem occurs when I try to collapse (minimize) the browser window, it starts to push everything around / distort it all.

What I am trying to achieve is a basically a “minimum” width if that makes sense. By minimum width, I mean the browser can expand / collapse as much as the person wants or can handle on their resolution, but at a certain point, I want it to stop from minimizing (around maybe 700px). So using the 700px example, say they were to minimize their window the site would begin to collapse, but after they reach a width of 700px, it wouldn’t collapse anymore and they would begin to not see all of the content.

How would I go about doing this?

Thanks in advance,

Elementax

2

You can wrap all of your content in a div with left and right margins and set that div to min-width: 700px;


.wrapper {
  margin: 0 50px;
  min-width: 700px;
}
3

Thank you! That’s exactly what I was looking for.

Elementax