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.
@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.
Hmm its still not fully fixed the gray schaded section still goes behind the h1 and now also the img.
@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
