Struggling with making a responsive webpage? Let me show you the issue I'm facing with the robot image and message placement.
On a Galaxy S5, everything looks good: https://i.sstatic.net/3Kc3z.png
However, when viewed on a Pixel 2 or other devices, the message gets shifted upwards like this: https://i.sstatic.net/3o3fT.png
It's not just limited to these two devices; the problem persists across different screens. While I've tried using media queries for specific devices, it feels like too much work. Any optimal solutions would be greatly appreciated. Thank you in advance.
If you want to take a look at my code snippet, here's the link: https://codepen.io/Amoocris/pen/vPWOpX
HTML
<div class="header-box">
<ul class="main-nav">
<li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
<li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
<h3 class="name">M.Amine Elwere</h3>
<h1 class="big-heading">Front-end</h1>
<h1 class="big-heading-2">Web developer</h1>
</div>
<div class="vector-1">
<img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
<img src="../vector/Png for the web/png-dialogue-2.png" data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
<h1 class="dialogue" data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>
</div>
CSS
@media (max-width: 480px) {
* {
margin: 0;
padding: 0;
}
body {
font-family: Roboto;
color: #33cccc;
background-color: #ffffcc;
}
.header-box {
width: 100vw;
height: 90vh;
background-color: #33cccc;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
position: relative;
}
.main-nav {
display: flex;
list-style-type: none;
justify-content: space-around;
width: 100vw;
text-align: right;
}
.main-nav__items {
text-decoration: none;
}
.main-nav__link {
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: bold;
color: #ffffcc;
}
.name {
font-family: Roboto;
text-align: center;
position: absolute;
top: -7%;
left: 3%;
font-size: 1rem;
}
.text {
font-family: Roboto;
font-weight: bold;
font-size: 2rem;
color: #ffffcc;
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
.img-header {
width: 30%;
height: auto;
position: absolute;
bottom: 0px;
}
.img-dialogue {
position: absolute;
bottom: 7rem;
left: 2rem;
}
/* .vector-1{
position: relative;
bottom: 0;
} */
.dialogue {
position: absolute;
font-family: inherit;
color: inherit;
bottom: 24%;
left: 17%;
}
.big-heading-2{
margin-top: 10px;
font-size: 3rem;
animation-name: moveInLeft;
animation-duration: 1.5s
}
.big-heading{
font-size: 3rem;
animation-name: moveInRight;
animation-duration: 1.5s;
}
}