[Solved] Please help me with my first porfolio page!

Code Feedback
1

Hi guys :slight_smile:
i’m having some issues with the third section of my portfolio page. When i scroll down from the “about me” section, the content of the section keep mixing with the content of the next section (“porfolio/Recent works” with the blue background color).
This is happening only when i reduce the size of the window and I don’t know why, any suggestion please?

Here is my Pen (i don’t know why the header’s background image is not following the “background-size:cover” property here on Codepen…with chrome it does)

thank you all :slight_smile:

2

Try changing this:
For all your containers (about-me, portfolio,…)…

Remove:
height: 100vw;
Replace with:
min-height: 100vw;

Instead of 100vw, use 100% for better browser support;

3

Hey man thanks for your help :slight_smile: Actually it worked (i tried also with % and it also worked), could you please explain me why it worked (and why my code was a mistake) ?
thank you again :smiley:

4

When you define a height, the element can’t grow or shrink; it’s forced to be fixed at that height. So while your sections were stuck at 100vw, they wouldn’t accommodate for your inner elements overflowing.

With min-height you ensure that the height is at least 100vw, but it can still grow (but not shrink) when necessary.

So when you zoom enough, your inner elements will take up more space than 100vw, but your div will grow when necessary.

Also just a suggestion:

I find the idea of making sections visible when you scroll to them, but using CSS hover is problematic on mobile, especially if I haven’t clicked it.

It also disappears if I accidentally hover to the bottom while two sections are in view. I’d suggest using a JS solution, or waiting on adding this feature till you can think of one.

5

Thank you a lot for your explanation my friend it helps me a lot :slight_smile:
And yes, i was thinking about using JS too for that effect; i’ll fix that when i learn JS :smiley:

1 Like