Html and CSS page will not scale with browser size

Question

Here is my code for the HTML and CSS. For whatever reason, it will not properly scale down, regardless of my use of only %'s and vw's. The entree div and drink div are dynamically populated which has added a further challenge in the formatting.

<!DOCTYPE HTML>

<html>
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">
<style>
  #percentageSize {
    width: 16%;
    height: auto;
    margin-top: -5%;
    margin-right: 1%;
    margin-left: -45%;
  }
  
  #percentageSize1 {
    width: 16%;
    height: auto;
    margin-top: -1%;
    margin-left: -400%;
  }
  
  .drinks {
    height: 100%;
    width: 100%;
    margin-left: 220%;
    margin-top: 2.5%;
    position: absolute;
    margin-top: -53.5%;
  }
  
  #thumbs {
    width: 100%;
    height: 100%;
  }
  
  .entree {
    height: 100%;
    width: 100%;
    margin-left: -5%;
    margin-top: 7%;
    position: absolute;
    top: 34%;
  }
  
  h1 {
    text-align: center;
  }
  
  .Joey {
    font-size: 3vw;
    margin-top: -18%;
  }
  
  h2 {
    text-align: right;
  }
  
  #continue {
    background-color: lightgrey;
    font-size: 1.1vw;
    padding: 1%;
  }
  
  #clear {
    padding: 1%;
    background-color: lightgrey;
    font-size: 1.1vw;
  }
  
  #add {
    padding: 1%;
    background-color: lightgrey;
    font-size: 1.1vw;
  }
  
  html {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(http://www.crossfitsofla.com/wp-content/uploads/2019/01/food.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  .header-right {
    text-decoration: none;
    margin-top: -8%;
    position: absolute;
    font-size: 2vw;
    color: black;
    margin-left: 65%;
    z-index: 1;
    font-family: Georgian
  }
  
  .buttons {
    margin-top: -6%;
  }
  
  .more {
    margin-top: 5%;
  }
  
  .Joey {
    color: PapayaWhip;
  }
</style>
<div class=stuff>
  <div class=Joey>
    <h1> Joey's Resturant
      <h1>
  </div>
  <div class="header-right">
    <a class="active" href="Entree Chooser.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;">Order</a>
    <a href="email.php" style="color: PapayaWhip; font-size: 2.3vw; font-family:Brush Script MT;  ">Contact</a>
    <a href="real Home.html" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Home</a>
    <a href="menue.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Menue</a>

  </div>
  <div class=more>
    <h1> <span style="font-family:Georgian; font-size: 3.2vw;  color:white; "> Your Cart: </span>
      <h1>
  </div>
</div>
<div class=buttons>
  <form action="handler2.php" method="post" name="formDemo">
    <input type='submit' id='clear' value='Clear' name='button2' />
    <input type='submit' id='add' value='Checkout' name='adder' />
    <input type='submit' id='continue' value='Continue Shopping' name='cancle' />
</div>


<br>
<br>

<body style="margin:75px;padding:75px">





  <h1> <span style='margin-left: -91%; font-size: 3vw; text-decoration: underline; font-family:Georgian; color: 	white;'>  Entrees: </span>
    <h1>
      <h1> <span style='margin-left:7%; margin-top: -5%; text-decoration: underline;  position:absolute; font-size: 3vw; font-family:Georgian; color: 	white;'>  Drinks: </span>
        <h1>
          <h1> <span style='font-family:Georgian; font-size: 3vw; color:white; position: absolute;  margin-left:8%; margin-top:-12%;'> 10456.71 </span>
            <h1>
              <div class='entree'>
                <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Cheese Steak</span>
                  <h1>

                    <label>
         <img id='percentageSize' src='pics/steak.png' >  </img>
        </label>
                    <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
                      <h1><br>
                        <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Breakfast Burrito</span>
                          <h1>

                            <label>
         <img id='percentageSize' src='pics/burrito.png' >  </img>
        </label>
                            <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1106</span>
                              <h1><br>
                                <div class='drinks'>
                                  <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Coke</span>
                                    <h1>

                                      <label>
         <img id='percentageSize1' src='pics/coke.png' >  </img>
        </label>
                                      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
                                        <h1>
                                          <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Pepsi</span>
                                            <h1>

                                              <label>
         <img id='percentageSize1' src='pics/pepsi.png' >  </img>
        </label>
                                              <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 700</span>
                                                <h1>
                                                  <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Red Bull</span>
                                                    <h1>

                                                      <label>
         <img id='percentageSize1' src='pics/redbull.png' >  </img>
        </label>
                                                      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 84</span>
                                                        <h1>
                                </div>
                                <div id='thumbs'></div> <span class='stretch'></span> </div>

</html>

Any help would be amazing. I am not sure what to do besides use %'s and vw's. Is it perhaps my use of div's?

For starters, your HTML is invalid. Try running it through a validator to fix the errors — j08691
– j08691, Commented Jun 11, 2019 at 21:06

hvlck · Accepted Answer · 2019-06-15 16:20:31Z

2

VW and VH stand for view-width and view-height respectively. This means that your element that you have applied these to will maintain the same size across any scaling or device because it is a calculated as a percentage of the viewport. For example, I could have a <h1> element that has the font-size of 10vw. This means that my <h1> will be 10% of the width of the device's viewport.

See: MDN w3

.pix {
  height: 50px;
  width: 50px;
  background-color: red;
}

.v {
  width: 100vw;
  height: 20vh;
  background-color: purple;
  font-size: 5vw;
}

<div class="pix">
<p>Pixels</p>
</div>

<div class="v">
<p>Viewport Based</p>
</div>

edited Jun 15, 2019 at 16:20

answered Jun 11, 2019 at 21:31

hvlck

493 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rachel Gallen · Accepted Answer · 2019-06-11 21:32:52Z

There are a number of things wrong with your code. Firstly, you are not opening the body tag at the top, so I've moved that up (and put the inline style in the css). Second you aren't closing your tags correctly; none of the h1 tags were closed, the closing </form> tag was missing, as was the closing </body> tag. <Img> is a self-closing tag, it doesn't need a closing '' - just a '/>' at the end.

These are just a few pointers. You have a lot of inline style in your code that you may want to rethink. As an addendum, css is interpreted as it's written, so put the html/body css at the top of your stylesheet (it'll be applied faster for a start!)

Hope this helps.

p.s try and use position relative rather than absolute! Better for responsive design..

html {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(http://www.crossfitsofla.com/wp-content/uploads/2019/01/food.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 75px;
  padding: 75px;
}

#percentageSize {
  width: 16%;
  height: auto;
  margin-top: -5%;
  margin-right: 1%;
  margin-left: -45%;
}

#percentageSize1 {
  width: 16%;
  height: auto;
  margin-top: -1%;
  margin-left: -400%;
}

.drinks {
  height: 100%;
  width: 100%;
  margin-left: 220%;
  margin-top: 2.5%;
  position: absolute;
  margin-top: -53.5%;
}

#thumbs {
  width: 100%;
  height: 100%;
}

.entree {
  height: 100%;
  width: 100%;
  margin-left: -5%;
  margin-top: 7%;
  position: absolute;
  top: 34%;
}

h1 {
  text-align: center;
}

.Joey {
  font-size: 3vw;
  margin-top: -18%;
  color: PapayaWhip;
}

h2 {
  text-align: right;
}

#continue {
  background-color: lightgrey;
  font-size: 1.1vw;
  padding: 1%;
}

#clear,
#add {
  padding: 1%;
  background-color: lightgrey;
  font-size: 1.1vw;
}

.header-right {
  text-decoration: none;
  margin-top: -8%;
  position: absolute;
  font-size: 2vw;
  color: black;
  margin-left: 65%;
  z-index: 1;
  font-family: Georgian;
}

.buttons {
  margin-top: -6%;
}

.more {
  margin-top: 5%;
}

<!DOCTYPE HTML>

<html>
<head>
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/main.css">
<style>

</style>
</head>
<body>
  <div class="stuff">
    <div class="Joey">
      <h1> Joey's Resturant
      </h1>
    </div>
    <div class="header-right">
      <a class="active" href="Entree Chooser.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;">Order</a>
      <a href="email.php" style="color: PapayaWhip; font-size: 2.3vw; font-family:Brush Script MT;  ">Contact</a>
      <a href="real Home.html" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Home</a>
      <a href="menue.php" style="color: PapayaWhip; font-size: 2.3vw; font-family: Brush Script MT;  ">Menue</a>

    </div>
    <div class="more">
      <h1> <span style="font-family:Georgian; font-size: 3.2vw;  color:white; "> Your Cart: </span>
      </h1>
    </div>
  </div>
  <div class="buttons">
    <form action="handler2.php" method="post" name="formDemo">
      <input type='submit' id='clear' value='Clear' name='button2' />
      <input type='submit' id='add' value='Checkout' name='adder' />
      <input type='submit' id='continue' value='Continue Shopping' name='cancle' />
    </form>
  </div>


  <br>
  <br>

  <h1> <span style='margin-left: -91%; font-size: 3vw; text-decoration: underline; font-family:Georgian; color: 	white;'>  Entrees: </span>
  </h1>
  <h1> <span style='margin-left:7%; margin-top: -5%; text-decoration: underline;  position:absolute; font-size: 3vw; font-family:Georgian; color: 	white;'>  Drinks: </span>
  </h1>
  <h1> <span style='font-family:Georgian; font-size: 3vw; color:white; position: absolute;  margin-left:8%; margin-top:-12%;'> 10456.71 </span>
  </h1>
  <div class='entree'>
    <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Cheese Steak</span>
    </h1>

    <label>
         <img id='percentageSize' src='pics/steak.png' /> 
        </label>
    <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
    </h1><br>
    <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute;  margin-left: -50%; margin-top: 0%; color: PapayaWhip;'> Breakfast Burrito</span>
    </h1>

    <label>
         <img id='percentageSize' src='pics/burrito.png'/>
        </label>
    <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -50%; margin-top: -13%; position:absolute;  color: PapayaWhip;'>  Quantity: 1106</span>
    </h1><br>
    <div class='drinks'>
      <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Coke</span>
      </h1>

      <label>
         <img id='percentageSize1' src='pics/coke.png'/>
        </label>
      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 1</span>
      </h1>
      <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Pepsi</span>
      </h1>

      <label>
         <img id='percentageSize1' src='pics/pepsi.png' />
        </label>
      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 700</span>
      </h1>
      <h1> <span style='font-family:Georgian; font-size: 2vw; position:absolute; margin-left: -224%; margin-top: 3.5%; color: PapayaWhip;'> Red Bull</span>
      </h1>

      <label>
         <img id='percentageSize1' src='pics/redbull.png' />
        </label>
      <h1> <span style='font-family:Georgian; font-size: 1.5vw; margin-left: -224%; margin-top: -17.5%; position:absolute;  color: PapayaWhip;'>  Quantity: 84</span>
      </h1>
    </div>
    <div id='thumbs'></div> <span class='stretch'></span> </div>
</body>

</html>

Sergio Mendez · Accepted Answer · 2019-06-11 21:14:57Z

0

Try to use 'vh' for Height and 'vw' for width.

for example:

.content {
  height: 100vh; //it will make the height 100% of your browser screen
}

answered Jun 11, 2019 at 21:14

Sergio Mendez

1,5298 gold badges37 silver badges60 bronze badges

Collectives™ on Stack Overflow

Html and CSS page will not scale with browser size

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related