-1

I am trying to make a single page website. I have a different container for each section which has a height of 100vh so the container resizes for different screens but the content does not which makes the website go all awry on small screens. How do I make the content resize as well with the container.

stt_code
  • 23
  • 1
  • 7
  • 1
    What content do you have inside? Perhaps you should provide an example. – darrylyeo May 28 '16 at 03:44
  • Can you provide some example code? How do you expect the content to resize when the container gets smaller? Do you expect it to be clipped and then scroll (e.g.`overflow`); do you expect it to scale down in size; do you expect it to change layout; etc.? – Steve Harrison May 28 '16 at 03:48
  • I would recommend using a responsive framework like Bootstrap CSS or something similar – Mihir Kale May 28 '16 at 03:48

2 Answers2

0

Maybe this can help

<HTML>
  <HEAD>
    <style>
     .resizer{
        min-width:700px;
        margin-left:10px;
        overflow:hidden;
      }
    </style>
  </HEAD>
  <BODY>
    <div class='resizer'>
       YOUR CONTENT goes here
    </div>
 </BODY>
</HTML>

You may also want to look at CSS: Auto resize div to fit container width

Community
  • 1
  • 1
Mihir Kale
  • 1,028
  • 1
  • 12
  • 20
0

The easiest thing you could do is go for a HTML5 responsive framework such as Bootstrap or use CSS media queries like shown here (or see below for quick example). Other than that it would probably involve javascript with similar end result to the aforementioned two ways.

@media screen and (min-width: 480px) {
body {
    background-color: lightgreen;
     }
}
f78xd23
  • 117
  • 2
  • 15