'After changing web size by zooming in or out, my buttons are overfloating and moving up/down

After changing web size by zooming in or out, my buttons are overfloating and moving up/down. Idk what to do.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
}

nav {
  display: flex;
  height: 6.250vw;
  width: 100%;
  background: #4D49F8;
  align-items: center;
  justify-content: space-between;
  padding: 0vw 6.458vw 0vw 5.208vw;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0.260vw;
  margin-right: 0.260vw;
}

nav ul li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 1.125vw;
  font-weight: 700;
  padding: 0.417vw 0.781vw;
  border-radius: 0.104vw;
  letter-spacing: 0.065vw;
  border: 0.104vw solid #ffffff00;
}

.hpl-text {
  position: absolute;
  height: auto;
  left: 6.458vw;
  top: 11.979vw;
  color: #FFFFFF;
  font-family: Rubik;
  font-style: normal;
  font-weight: bold;
  font-size: 3.333vw;
  line-height: 3.958vw;
}

.hp-text {
  position: absolute;
  width: 42.240vw;
  height: auto;
  left: 6.458vw;
  top: 17.708vw;
  font-family: Rubik;
  font-style: normal;
  font-weight: normal;
  font-size: 1.563vw;
  line-height: 1.875vw;
  color: #FFFFFF;
}

.add-btns {
  position: absolute;
  width: auto;
  height: auto;
  left: 1.042vw;
  top: 28.125vw;
  align-items: center;
  justify-content: space-between;
  padding: 0 6.458vw 0 5.208vw;
}

.add-btns ul {
  display: flex;
  list-style: none;
}

.add-btns li {
  margin-top: 0vw;
  margin-bottom: 0vw;
  margin-left: 0.260vw;
  margin-right: 1.042vw;
}

.add-btns li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 1.250vw;
  font-weight: 700;
  padding: 0.417vw 0.781vw;
  border-radius: 0.104vw;
  letter-spacing: 0.065vw;
  border: 0.104vw solid #ffffff00;
}

#materialy-btn {
  border: 0.104vw solid #FFFFFF;
}

#algorytmy-btn {
  border: 0.104vw solid #ffffff00;
  background: #F13CAF;
}

<nav>
  <div class="logo">
    <a href="index.html">
      <img class="logo-sett" src="logo.png">
    </a>
  </div>
  <ul>
    <li><a href="algorytmy.html">algorithm</a></li>
    <li><a href="#">schedule</a></li>
    <li><a href="#">resources</a></li>
    <li><a href="#">about us</a></li>
  </ul>
</nav>
<div class="spacer layer1">
</div>
<div class="hp-container">
  <h1 class="hpl-text">Lorem Ipsum</h1>
  <p class="hp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et bibendum enim. Vestibulum vitae libero vel ipsum non turpis pulvinar suscipit. In pharetra leo eros, quis blandit turpis dictum id.</p>
  <div class="add-btns">
    <ul>
      <li><a href="#" id="algorytmy-btn">algorithm</a></li>
      <li><a href="#" id="materialy-btn">resources</a></li>
    </ul>
  </div>
  <img class="unicorn" src="unicorn.png">
  <img class="img-programming" src="programming.png">
  <img class="img-connection" src="connection.png">
  <img class="img-algorithm" src="algorithm.png">
</div>

I know that is not the best idea to put position: absolute; on every element but its my first website. I would be very grateful if someone could help me.

html css

Solution 1:^[1]

The problem I see is you use top: 28.125vw for .add-btns.

vw is the unit for view width which is the width of your parent container (body here).

So by zooming in/out, the position for .add-btns will not be the same way By change it to vh or % (precentage) will make it work.

It is the same idea for nav. Also, I don't think it is always a good idea to use vw for all css style .

My suggestion is to use px instead for things like font and line-height and use css media query

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
} 
nav{
display: flex;
height: 6.250vw;
width: 100%;
background: #4D49F8;
align-items: center;
justify-content: space-between;
padding: 0vw 6.458vw 0vw 5.208vw;
}
nav ul{
display: flex;
list-style: none;
}
nav ul li{
margin-top: 0;
margin-bottom: 0;
margin-left: 0.260vw;
margin-right: 0.260vw;
}
nav ul li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.125vw;
font-weight: 700;
padding: 0.417vw 0.781vw;
border-radius: 0.104vw;
letter-spacing: 0.065vw;
border: 0.104vw solid #ffffff00;
}
.hpl-text{
position: absolute;
height: auto;
left: 6.458vw;
top: 11.979vw;
color: #FFFFFF;
font-family: Rubik;
font-style: normal;
font-weight: bold;
font-size: 3.333vw;
line-height: 3.958vw;
}
.hp-text{
position: absolute;
width: 42.240vw;
height: auto;
left: 6.458vw;
top: 17.708vw;
font-family: Rubik;
font-style: normal;
font-weight: normal;
font-size: 1.563vw;
line-height: 1.875vw;
color: #FFFFFF;
}

.add-btns{
position: absolute;
width: auto;
height: auto;
left: 1.042vw;
top: 28.125vh;
align-items: center;
justify-content: space-between;
padding: 0 6.458vw 0 5.208vw;
}
.add-btns ul{
display: flex;
list-style: none;
}
.add-btns li{
margin-top: 0vw;
margin-bottom: 0vw;
margin-left: 0.260vw;
margin-right: 1.042vw;
}
.add-btns li a{
color: #f2f2f2;
text-decoration: none;
font-size: 1.250vw;
font-weight: 700;
padding: 0.417vw 0.781vw;
border-radius: 0.104vw;
letter-spacing: 0.065vw;
border: 0.104vw solid #ffffff00;
}
#materialy-btn{
border: 0.104vw solid #FFFFFF;
}
#algorytmy-btn{
border: 0.104vw solid #ffffff00;
background: #F13CAF;
}

<nav>
<div class="logo">
<a href="index.html">
<img class="logo-sett" src="logo.png">
</a>
</div>
<ul>
<li><a href="algorytmy.html">algorithm</a></li>
<li><a href="#">schedule</a></li>
<li><a href="#">resources</a></li>
<li><a href="#">about us</a></li>
</ul>
</nav>
<div class="spacer layer1">
</div>
<div class="hp-container">
<h1 class="hpl-text">Lorem Ipsum</h1>
<p class="hp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et bibendum enim. 
Vestibulum vitae libero vel ipsum non turpis pulvinar suscipit. 
In pharetra leo eros, quis blandit turpis dictum id.</p>
<div class="add-btns">
<ul>
<li><a href="#" id="algorytmy-btn">algorithm</a></li>
<li><a href="#" id="materialy-btn">resources</a></li>
</ul>
</div>
<img class ="unicorn" src="unicorn.png">
<img class ="img-programming" src="programming.png">
<img class ="img-connection" src="connection.png">
<img class ="img-algorithm" src="algorithm.png">
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	James

'After changing web size by zooming in or out, my buttons are overfloating and moving up/down

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]