Product Landing Page: feedbacks please and thank you

Hi all,

Please, kindly take a look at my Product landing page. https://codepen.io/mdotcoder/pen/MRrNZB
A lot is wrong with it that I’ve tried my best to fix. I just have to submit and move to the next project as I’m at my wits end.
Still working on and learning page responsiveness and media queries (they are quite confusing)

I don’t want my nav bar fixed, however fixing it is the only way it stays within the header.
Delete CSS Line 47 (position: fixed;) and you’d see what I’m talking about.
I would really appreciate if someone could point out what the issue is.

Thank you for taking the time.

1 Like

There are tons of screens and devices with different heights and widths, so unfortunately, there’s no defined standard breakpoint for each device to target.
However, you can simply use these;

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

Small devices (portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 600px) {...}

Medium devices (landscape tablets, 768px and up)
@media only screen and (min-width: 768px) {...}

Large devices (laptops/desktops, 992px and up)
@media only screen and (min-width: 992px) {...}

Extra large devices (large laptops and desktops, 1200px and up)
@media only screen and (min-width: 1200px) {...}

You can see other explanations with examples here… https://stackoverflow.com/questions/16443380/common-css-media-queries-break-points

Thanks for the extensive input and suggestions. Really appreciate.

1 Like