Problem with height: 100vh. Help needed

Problem with height: 100vh. Help needed
0.0 0

#1

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


#2

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.


#3

@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.


#4

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


#5

@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).


#6

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


#7

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

min-height: 600px;

instead of 100vh will solve your problem.


#8

No, that does not resolve the problem.


#9

@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!


#10

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.


#11

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


#12

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


#13

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


#14

Yes, see my edited last post.


#15

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


#16

@Webnell @randelldawson then why not making

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

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


#17

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


#18

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


#19

You are very welcome @Webnell .