Would someone mind taking a look at my Product Landing Page project?

Code Feedback
1

Hi,

I was moving along on this project, hitting the user stories, making it my own. I haven’t gotten it entirely where I want it yet, but when checking the site in landscape view for phones, things started stacking on top of one another and I don’t know why. Then, when I pulled the code over from VSC and put it in codepen it even started looking weird there on desktop.

FCC Product Landing Page codepen

I’ve been racking my brain over why this is happening and not sure what the fix is. If anyone could take a look I’d reallly appreciate it.

I’m sure that my markup is a mess, and I’m still working on it. But I’m wondering what it is I’m overlooking.

Thanks

p.s. after some playing around, I noticed that height: 100vh; on one of my flex divs is causing at least one of the problems. So at the very least in landscape mode it’s making things look weird and I don’t know why. Thanks again.

2

Hey there,

I’m having a hard time understanding your problem and your desired goal.

Would be great to see an image of the current problematic state and the desired state.

3

Sure, here’s an image of the problem I was coming across.

Screen Shot 2020-10-08 at 9.59.02 AM
Screen Shot 2020-10-08 at 9.59.02 AM1218×810 248 KB

As you can see, in landscape mode the second section is showing up and
covering parts of the header. I determined it has something to do with the height: 100vh; I had set on the element creeping up, but I don’t know why and I would like to.

.services-contact-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100vh;
}

For a temporary fix I set a media query to change it to height: 100%; but I’m not entirely sure why that fixed it since I don’t know why it was broken.
It seemed like the shorter the screen the higher into the header it would creep.

My desired state is that these elements and divs stay in their place and not overlap one another. Initially I was trying to have three sections to the landing page, each with their own “page”, hence my use of height: 100vh; but it’s causing me problems. At least the way I’m doing it.

Thanks

4

I too had your issue. The only difference was mine happened when going from desktop to mobile.

My understanding for this is that setting a 100vh gives a fixed height to the container. This does not account for any changes in height for content in the container. So things start to overlap as the container is no longer responsive in height when we start to decrease the width.