Problem with height: 100vh. Help needed

HTML-CSS
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

3

@camperextraordinaire Sure please find the image below.

Porfolio%20-%20Issue
Porfolio%20-%20Issue1579×356 93 KB

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.

5

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

7

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

min-height: 600px;

instead of 100vh will solve your problem.

1 Like
9

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

Capture3
Capture3813×416 88.2 KB

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 @camperextraordinaire ?

Capture4
Capture41366×635 49.9 KB

15

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

16

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

Code
Code713×189 9.45 KB

19

You are very welcome @Webnell .

1 Like
20

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