After deciding to create a portfolio website, I came across an example that I liked and decided to replicate its style. However, I encountered an issue with responsiveness. When you resize the window on my site (https://olaolu.dev), everything changes size automatically in a similar way to "object:contain", but not quite right. Can anyone help me fix this?
Here is my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/b/cs.css">
</head>
<body>
<section class="section-top">
<img class="main1-img" src="/b/images/pngtree-portfolio-memphis-playful-abstract-pink-image_593412.jpg ">
<h2>faxraddin</h2>
<h1>Frontend</br> Developer.</h1>
<h3 class="profession-info">I like to craft solid and scalable frontend products with great user experiences.</h3>
<img class="my-img" src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
<div class="some-info">
<span>Highly skilled at progressive
enhancement, design systems &
UI Engineering.
</span>
<span>Over a decade of experience
building products for clients
across several countries.
</span>
</div>
<div class="btn-container">
<ul>
<li><a></a></li>
</ul>
</div>
</section>
<script src="/b/js.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
}
.section-top{
contain: size;
position: relative;
}
.main1-img{
width: 100%;
height: 666px;
position: relative;
}
.section-top h2{
position: absolute;
top: 0;
padding: 20px;
padding-left: 100px;
font-size: 2.5rem;
color: rgb(32, 166, 166);
}
.section-top h1{
position: absolute;
top: 20%;
left: 10%;
font-size: 4.5rem;
color: rgb(32, 166, 166);
}
.profession-info{
position: absolute;
top:48%;
left: 10%;
color: rgb(32, 166, 166);
width: 25rem;
}
.my-img{
width: 333px;
position: absolute;
right: 22%;
top:23%;
}
.some-info{
position: absolute;
top: 65%;
display: flex;
justify-content: space-between;
width: 30rem;
left: 10%;
}
.some-info span{
width: 50%;
margin-right: 10%;
color: rgb(8, 105, 105);
}
@media screen and (max-width:700px) {
}