Need help with Product Landing Page Project

1

I’m working on the Product Landing Page project, and I have an issue with some amount of px getting hidden under the fixed header after an anchor link is clicked on. For example, if I click on the header logo to go back to the first section (#splash-screen section), some amount of px (20-50 px maybe?) that gets hidden under the header; it’s an issue with all sections (4 total). I would have to scroll up in order to see the whole section.

I’ve been stuck on this little issue for almost 24 hours and can’t seem to find a good solution to it. I know a few px doesn’t seem like an issue, but I want a solution for future reference. Also, it’s bugging the crap out of me because I am a “little” OCD. Here’s a link to the CodePen (I spaced each part because I can’t add links; copy and paste, and just delete the spaces in between to get the full link).

codepen. io /chataolauj/ pen/QzJRLr

2

You could wrap the section with a div an move the id to that div. give the wrapper a top-padding as thick as the header.

Hope that will fix your problem.

3

I haven’t tried that. There have been similar solutions, but most of those solutions have stated putting an empty span before each section and offset it using CSS; messes up my grid when I do so. I’ll try wrapping each section like you said.