1 reply

Compatibility issues

Hello! I'm working on my personal website: https://birthyear.site/. Everything looks at works well at the natural size, however, as soon as I scale the width down using Devtools, my 100vh divs suddenly shrink and do not cover the whole viewport.

I tried achieving it in another file like that:

<head>
    <style>
        *, body{
            margin: 0;
            padding: 0;
        }
        .f{
            width: 100vw;
            height: 100vh;
            background: yellow;

        }
        .s{
            width: 100vw;
            height: 100vh;
            background: red;
        }
    </style>
</head>
<body>
    <div class="f"></div>
    <div class="s"></div>
</body>

<head>
    <style>
        *, body{
            margin: 0;
            padding: 0;
        }
        .f{
            width: 100vw;
            height: 100vh;
            background: yellow;

        }
        .s{
            width: 100vw;
            height: 100vh;
            background: red;
        }
    </style>
</head>
<body>
    <div class="f"></div>
    <div class="s"></div>
</body>

and everything seemed to work as expected. Any idea why it does not work on my website?

KP-C

Kevin Powell - Community•2y ago•

1 reply

godrozhdenia

Compatibility issues

<head>
    <style>
        *, body{
            margin: 0;
            padding: 0;
        }
        .f{
            width: 100vw;
            height: 100vh;
            background: yellow;

        }
        .s{
            width: 100vw;
            height: 100vh;
            background: red;
        }
    </style>
</head>
<body>
    <div class="f"></div>
    <div class="s"></div>
</body>

<head>
    <style>
        *, body{
            margin: 0;
            padding: 0;
        }
        .f{
            width: 100vw;
            height: 100vh;
            background: yellow;

        }
        .s{
            width: 100vw;
            height: 100vh;
            background: red;
        }
    </style>
</head>
<body>
    <div class="f"></div>
    <div class="s"></div>
</body>

and everything seemed to work as expected. Any idea why it does not work on my website?

Compatibility issues

Similar Threads

Compatibility issues

Similar Threads

Similar Threads

Similar Threads