I'm trying to get the following up with a text inside a container: Desired behavior animation But unfortunately, that's what I'm getting: My approach Here's the code I have so far: Answer You should set height of your container using vw as well as width of your element consider It will work as you want, let me know if otherwise

Scaling the entirely content of a container based on the viewport width

I’m trying to get the following up with a text inside a container: Desired behavior animation

But unfortunately, that’s what I’m getting: My approach

Here’s the code I have so far:

<!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">
    <style>
        .container {
            max-width: 1920px;
            margin: 0 auto;
        }

        .title {
            font-size: clamp(12px, 10vw, 142px);
            text-transform: uppercase;
            align-items: center;
            white-space: nowrap;
            width: 100%;
        }
        .title:last-child{
            text-align: right;
        }
    </style>
</head>

<body>
    <section>
        <div class="container">
            <h2 class="title">Get in touch</h2>
            <h2 class="title">Know about me</h2>
        </div>
    </section>
</body>
</html>

Answer

You should set height of your container using vw as well as width of your element consider

height : 20vw;

It will work as you want, let me know if otherwise

Advertisement

Answer