Landing Page Advice

Hi all,

I’m mostly done with my landing page; however, I’m having issues with the in-page links showing the middle of the section instead of the start. I know it’s caused by the fixed header, and it’s actually an issue in the example pen as well. Is there a way to fix this? I tried creating a div with a fixed height so when I click on the link it sorta cheats where the beginning of the page starts, but it looks wonky depending on the screen.

https://codepen.io/be2mbs/pen/dBBmGQ

If you change your headers background-color to transparent then use the links you’ll see that the sections go to the top of the viewport, normal. Here’s how to fix it. https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/

Thank you for that link! I did try something like that but found it wasn’t responsive enough. Do you think that by turning them into percentages it would be more responsive?

That link only solves keeping your sections below the header. For a fluid page, use relative measurements like rems, ems, vw, vh, or percents not fixed measurements like inches centimeters,or pixels. Fluid + media queries = responsive.

not bad design but colors don’t suit to each other

The colors were pulled from the picture, though if you’re on mobile, you shouldn’t see it. I’ll consider this, thanks.

Thank you for your help!