KPC
Kevin Powell - Community•9mo ago
godrozhdenia

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
reddogg476•9mo 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; */
}

Did you find this page helpful?