make responsive introducion page-CodePudding

i decided make portfolio websites I found example, decided to copy its style etc, but I have issue at the start,i made everything good(I was thinking so),but I have a problem with its responsibility, you can see here https://olaolu.dev,that when you change window size, its automatically change size of everything, its similar to object:contain; but a little different, can you help me do it right ?

here is my code

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="/b/cs.css">
</head>
<body>

    <section >

        <img  src="/b/images/pngtree-portfolio-memphis-playful-abstract-pink-image_593412.jpg ">
        <h2>faxraddin</h2>
        <h1>Frontend</br> Developer.</h1>
        <h3 >I like to craft solid and scalable frontend products with great user experiences.</h3>
        <img  src="/b/images/Screenshot 2022-11-04 at 19.35.20.png">
        <div >
            <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 >
            <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) {
}

CodePudding user response：

First step regarding the problem you describe is adding these tags to your <head> section.

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

CodePudding user response：

Wait, so you want everything to shrink, when changing the window size? Or what exactly is your issue