Product Landing Page: feedbacks please and thank you

Code Feedback
1

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
2

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… responsive design - Common CSS Media Queries Break Points - Stack Overflow

3

Thanks for the extensive input and suggestions. Really appreciate.

1 Like