CODEWITHSUNDEEP
htmlcsssizing
Gerge Gansky
Gerge Gansky

Reputation: 31

My content changes size when zoom in and out

I don't know why but my content changes its size when I zoom in or out on my window (chrome). Does anyone know why? This is my code: Its at the very end of the css and html. If anyone knows what to do It would be greatly appreciated. I tried changing all my sizing from percentage to px but it does not help.

Demo:

.title {
  font-family: tahoma;
  text-align: center;
}

.numbersystem1 {
  font-family: tahoma;
  position: absolute;
  top: 85px;
  left: 600px;
}

.rectangle {
  width: 530px;
  height: 60px;
  border: 1px solid #000;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.nvbr {
  font-family: tahoma;
  font-size: 15px;
  position: absolute;
  top: 87px;
  left: 631px;
}

.nvbrleft {
  font-family: tahoma;
  font-size: 15px;
  position: absolute;
  top: 165px;
  left: 640px;
}

.nvbrright1 {
  font-family: tahoma;
  font-size: 15px;
  position: absolute;
  top: 165px;
  left: 940px;
}

.nvbrright2 {
  font-family: tahoma;
  font-size: 15px;
  position: absolute;
  top: 165px;
  left: 1100px;
}

.nvbrright3 {
  font-family: tahoma;
  font-size: 15px;
  position: absolute;
  top: 165px;
  left: 1020px;
}

.img1 {
  position: absolute;
  left: 640px;
  top: 250px;
  height: 130px;
  width: 120px;
}

.img2 {
  position: absolute;
  left: 1040px;
  top: 250px;
  height: 130px;
  width: 120px;
}

.intro1 {
  font-family: tahoma;
  position: absolute;
  top: 355px;
  left: 600px;
}

.code1 {
  font-family: monospace;
  font-size: 14px;
  padding: 7px;
}

.introq {
  font-size: 17px;
  font-size: tahoma;
  list-style-position: inside;
  list-style-type: circle;
  position: absolute;
  left: 560px;
  top: 400px;
  height: 130px;
  width: 700px;
}

.code2 {
  font-family: monospace;
  font-size: 14px;
  padding: 7px;
}

#backroundcolourthing-home {
  background-color: rgb(255, 255, 255);
  padding: 10px;
  border: 0px solid green;
  width: auto;
  min-height: 600px;
  height: 1050px;
  margin: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="articles.css">
</head>

<body>



  <div>
    <h1 class="title"> How to create an HTML website </h1>
  </div>
  <div class="point1">
    <div class="pointbar">
      <p class="numbersystem1"> 1.</p>
      <p class="nvbr"> Nav Bar</p>
      <div class="rectangle"></div>
      <p class="nvbrleft"> Yourwebsitename</p>
      <p class="nvbrright1"> Home</p>
      <p class="nvbrright2"> idea3</p>
      <p class="nvbrright3"> about</p>
    </div>

    <div id="backroundcolourthing-home"></div>

    <div>
      <div class="leftsectionintro">
        <img class="img1" src="img11.jpg" alt="Italian Trulli">
        <p class="intro1">Left Section</p>
        <p class="intro1-1">
          <ol class="introq">
            <li>Instead of the # put in your name</li>
            <div class="code1"> href="#" </div> <br>
            <li>Put name of the website afterwards</li>
            <div class="code1">>websitename</div>
          </ol>
          <p class="code2">

          </p>

        </p>
      </div>
      <div class="rightsectionintro">
        <img class="img2" src="img12.jpg" alt="Italian Trulli">
      </div>



    </div>
  </div>

Upvotes: 1

Views: 46

Answers (0)

Related Questions