Kevin Powell - Community•3mo ago

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?

1 Reply

reddogg476•3mo ago

take away overflow: hidden from the body

body{
    font-family: Urbanist;
    font-weight: 500;
    font-size: 36px;
    background: #FFF7E1;
    height: 200vh;
    /* overflow: hidden; */
}

body{
    font-family: Urbanist;
    font-weight: 500;
    font-size: 36px;
    background: #FFF7E1;
    height: 200vh;
    /* overflow: hidden; */
}

Gaming

Programming

Compatibility issues