Problem with height: 100vh. Help needed

As I was working on my portfolio website I have noticed that the overall responsiveness is fine but when I resize the height of the screen the first section which I set to a height of 100vh is completely off. In fact, the text sinks inside of the about me section.

Does someone know how this can be fixed?

Help is much appreciated.

Thanks

Can you take a screenshot of the problem you are seeing that you want to avoid? I am not seeing a problem is when I shrink the height of the screen, but I also do not know what your expectations are for the first section’s behavior.

@RandellDawson Sure please find the image below.

The text (Front-End Dev…) sinks inside of the gray colored section and pushed the other text away.

I feel that the text (Front-End Dev…) should remain inside of its container and not sink inside of a different section. If it makes sense.

What browser are you using? I am unable to duplicate the problem you are showing above when viewing your pen with Chrome.

@RandellDawson Hmm, maybe its just happening with my computer. I am also using Chrome. This issue occurs when I drag the window up and down to resize it. (Only when I change the height not also the width).

Wait a minute. I finally got it to do what you are seeing. Let me think about it and get back to you.

Think that giving your .hero-img class a fixed height like

min-height: 600px;

instead of 100vh will solve your problem.

1 Like

No, that does not resolve the problem.

@RandellDawson @sorinr I have just tried it myself and the text still shifts inside of the following section. =(
I am really not sure what is causing this issue!

Maybe I’m not reproducing the same behavior as yours. Here is a forked pen with the css changed as above and it seems working as expected when you shrink the height of the window.

Using your forked pen, shrink the browser height first, then scroll down and you will see the issue the OP sees.

com-video-to-gif

Hmm its still not fully fixed the gray schaded section still goes behind the h1 and now also the img.

Is this the behavior you are talking about @Webnell @RandellDawson ?

Yes, see my edited last post.

Yes, You see how the h1 sinks inside of the other section

@Webnell @RandellDawson then why not making

.section-hero {
    min-height: 600px;
    padding: 0;
}

?
and also maintaining min-height: 600px; for .hero-img class

or just

section {
  min-height: 600px;
  max-height: 100vh;
    padding: 80px 0;
}

to ensure your sections have a minimum fixed height and a 100vh max one.

ofc 600px its just an arbitrary value. change it to your taste

@sorinr I have tried the one below and this seems to work. Thanks, it looks much better now.

You are very welcome @Webnell .

1 Like

Thanks a lot, I was having a problem unrelated to this, but your answer helped me figure out mine. I had set all the elements on my page to be 100vh each, but some of them had to be resizable because they had collapsible content, the thing is that it wasn’t working quite right since the elements had height:100vh so it was messing up the layout. It works fine now that I’ve set it to min-height:100vh and height:100%.

Thanks a lot

1 Like