Kevin Powell - Community•12mo ago

Resize screen issue

So the first picture shows how it looks regualrly. But when I resize my screen to smaller the text starts getting out of range like this picture

3 Replies

bigdaddyOP•12mo ago

it's happening cause in my parent container I have it like

 .page-container {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    height: 100dvh;
}

 .page-container {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    height: 100dvh;
}

if I didn't have the height property this won't happen but I'm not sure why cause I want the height prolerty so the data gets spread out more

clevermissfox•12mo ago

Don't use fixed heights, use min-height: 100dvh; or things will overflow as they are. Fixed heights in css are a nono, they create a ton of issues, none of which are fun to debug and deal with

Gaming

Programming

Resize screen issue