Honestly, It took me hours to finish this. I had a bit of trouble getting the nav bar responsive and all the other sections, but its surely worth it. I was a little inspired from my minecraft days and so I figured why not create a mc server landing page.
https://trek182021.github.io/ProductLandingPage/index.html
Any feedback is greatly appreciated!
This looks really nice!! My product landing page took me ages as well. 
A few suggestions:
- I can see an image within the #header element with a corresponding id=“header-img”. A company logo would make a good image here.
When clicking a header link, the title for the section ends up going under the fixed navbar. You could try adding padding-top that is the same measurement as the navbar height to the section header.
On a small screen (e.g. iPhone X), the feature text is cut off on the right hand side and is not centered. I thin it’s because that container has a padding of 40 on all sides. Maybe try removing left and right padding on small screens?
On a really small screen (iPhone 5), the hero text slides under the fixed navbar. Try adding some padding-top for that as well.
Let me know how it works out! ~HiL
Honestly, about the header-img. that’s just me being lazy and frustrated about not knowing its supposed to be an image. I thought icon would be fine and I went with it the whole time. After doing everything, I just left the icon in there. I’ll try to remake it later on. I looked at the iPhone X and iPhone 5 size and I really didn’t see that problem. I tried putting padding, but the whole thing went down and took the space of the div below them. Is there a good fix for this? Is there a way to keep the elements within the size of the parent div and not keep stretching unto other elements?
I really appreciate the feedback! I’d applied your advice on my other projects that have the same problem and it works great!
@Trek182021 It’s just an ID so you can probably just put it on anything in the header, even just text. 
I’ll try to play around with your code tomorrow to see if I can figure something out. ~HiL
I really like the design. Cool icons and well done with the hamburger menu.
@Trek182021 In “inspect” chrome dev tools: I unchecked padding: 40px; on .inner-feature and everything correctly centered on the iPhone X view. I think you just need some padding-top to push the globe away from the previous section. Could try adding padding-top: 20px; in your media query?
Another thing I noticed is that the form is wrapped in an h3. I snooped on your GitHub code and noticed it’s because you’re missing a closing h3 tag on line 57. When I removed the extra <h3> around the form in inspect, the sections overlapped. I wasn’t sure why occurred, so that sounds similar to what you described about things moving into the next div. I’m going out on a limb here but maybe it’s because .main-content has position: absolute; but nothing else has position specified. I think absolute positioning could be messing it up. Instead of that, you could try making it a flex container or maybe it needs to be position: relative instead. When I made that change, the page stayed the same and the sections stayed as they should. When I tried adding padding-top:75px (since the header is height 68px) to the .email section to push down the hero text, the background image didn’t go all the way to the bottom of the section- but the sections didn’t overlap so that was a win! 
Let me know how you work it out. ~HiL 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.