website layout going crazy when I zoom out and in

Question

idk why but when I zoom out of my website, the code seems to fall apart and the whole thing just looks disgusting. I've checked out other answers to this question but NONE of the solutions really tailor towards MY code.

body {
  background-image: url(gradient.png);
  background-repeat: no-repeat`enter code here`;
}

h1.heading {
  color: #046289;
  font-size: 50px;
  margin-top: 100px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

p.heading {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-size: 20.8px;
  font-weight: 600;
  position: relative;
  margin-left: 70px;
  top: 60px;
}

p.heading1 {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: relative;
  margin-left: 70px;
  top: 50px;
}

img.aml {
  width: 280px;
  height: 280px;
  position: absolute;
  margin-left: 360px;
  bottom: 30px;
}

iframe.livevid {
  position: absolute;
  margin-left: 840px;
}

p.vid {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-size: 20.8px;
  font-weight: 600;
  position: absolute;
  margin-left: 840px;
  top: 307px;
}

p.vid1 {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: absolute;
  margin-left: 840px;
  top: 353px;
}

a {
  text-decoration: none;
}

p a:link {
  color: #4204a5;
}

p a:visited {
  color: #4204a5;
}

p a:hover {
  color: #71a3f2;
}


/*
 BELOW - NAVIGATION BAR
 */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

li {
  float: left;
}

.spacefornav {
  margin-left: 462px;
}

li a:hover {
  color: #71a3f2;
}

div.nav {
  color: #046289;
}

li a {
  display: inline-block;
  color: #046289;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-family: 'Poppins';
  sans-serif;
  margin: 0px 20px;
  font-weight: 500;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Childish Gambino</title>



  <meta charset="UTF-8">
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&amp;subset=devanagari,latin-ext" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  <h1 class="heading">CHILDISH GAMBINO</h1>
  <ul>
    <div class="nav">
      <li class="spacefornav"><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="music.html">Music</a></li>
      <li><a href="contact.html">Contact</a></li>
    </div>
  </ul>
  <p class="heading">"AWAKEN MY LOVE!"</p>
  <p class="heading1">
    Childish Gambino's latest
    <br> and freshest album is
    <br> AVAILABLE NOW on <a href="https://itunes.apple.com/us/album/awaken-my-love/id1173655524" target="_blank">iTunes</a>,
    <br>
    <a href="https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7" target="_blank">Spotify</a> and <a href="https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=en" target="_blank">Google Play Music</a>
  </p>
  <img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art">
  <<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
    <p class="vid">Watch Now!</p>
    <p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>

Simple answer, you didn't make your site responsive, I recommend reading this: https://www.w3schools.com/html/html_responsive.asp — Arjan Knol, May 15 '17 at 10:15
Possible duplicate of [HTML Website Going Crazy when Zoomed out](http://stackoverflow.com/questions/43997220/html-website-going-crazy-when-zoomed-out) — piet.t, May 16 '17 at 11:22

score 0 · Answer 1 · answered May 15 '17 at 10:14

0

If you use some inline DIV's that fit exactly into other DIV's this problem can happen. When zooming in/out pixels are being divided. If you give the DIV's one extra pixel of space it's fixed.

answered May 15 '17 at 10:14

Remco K.

644
4
19

How would i go about doing that? – Aaron A May 15 '17 at 10:24
for example change **.spacefornav {margin-left: 462px;}** to **461px** – Remco K. May 15 '17 at 10:29
so they should all be odd numbers so that the pixels cannot be divide right?/?? – Aaron A May 15 '17 at 11:23
not exactly... just make the positions not depending on 1 pixel. For example: if you have a container of 400 pixels and you want two inline div's in it. Make them 199 each. – Remco K. May 15 '17 at 11:57
So can you give me an example from my website on how i should go about doing so. like from my code – Aaron A May 16 '17 at 06:52
I tried with your code but the styling is too static. For example; if you want to position something in the center you can use margin: auto in stead of margin-left: 462px. I would recommend to visit this website: https://www.codecademy.com/en/tracks/htmlcss – Remco K. May 16 '17 at 07:41

website layout going crazy when I zoom out and in

1 Answers1