Overflow Hidden is Not Working

Question:
So I am trying to make a page not be able to be scrolled, I just want it to stay put. I have used overflow: hidden; and the x and y versions in the HTML page and in the CSS page and it has not worked. It is in signin.html.

Repl link:
https://replit.com/@SalladShooter/AreaKnowledge#signin.html

<style>
    overflow-y: hidden;
    overflow-x: hidden;
</style>

and

.loginContainer {
    overflow-x: hidden;
    overflow-y: hidden;
    justify-content: center;
    text-align: center;
    margin: auto;
    margin-top: 20vh;
    width: 40vw;
    height: 50vh;
    border-radius: 10px;
    background-color: var(--accent);
    border: 2px solid var(--glow);
}

I looked at the file you specified, but I didn’t see the scrollbar there. Could you please send screenshots demonstrating your problem?

1 Like

you’re missing a selector.

surround this with body { }
But why don’t you want it scrolled?

3 Likes

Silly me, cant believe I forgot a selector :sweat_smile:. I don’t want it to scroll as what would be the point if everything is right there, because the only thing on that page is the top bar and the sign in.

What if someone’s device is too small?

@boston2029 what would you suggest. I am using em rem vw vh to try and make it compatible.

Ohohohohohohohohhohohoh (very long intro, sorry), using em, rem, vw, and vh to make it mobile compatible doesn’t make it mobile compatible. Or, rather, isn’t the best practice. Very counter-intuitive. Instead, try this: CSS @media Rule and finetune dimensions. Try using pixels for most cases, unless you want something to be measured in a certain way (e.g., a section that’s the same dimensions with the window would use 100vh and 100vw).

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.