Product Landing Page - Feedback on Layout & Media Queries

Hi all!
I completed my product landing page a while ago and used an already existing brand to do so (which I hope is okay to do). I would love to hear some feedback on it as I’m not too sure if it is responsive.

Project:

[https://codepen.io/Zerene/full/dyJLLXv]
(https://codepen.io/Zerene/full/dyJLLXv)

I added media queries, but I’m not too sure how to make it responsive for all screen sizes, including mobiles. Any tips on how to do so?

Also, my last button in the ‘Shop’ section doesn’t work and I don’t know why.

Hi @Zerene,
Good job on competing the project!
Your page has some responsiveness but not on all screen sizes.
I think a generally good approach would be to build the page from the mobile version first and make it work on small screens first. Then from there, you can check where your layout breaks down and add media queries there - in that case you would use min-width instead of max-width to target the larger screen sizes where the layout doesn’t work anymore.

Regarding the button you mention, it is actually working for me.

I hope that helps! :slight_smile:

Hello!
I never thought about starting from the mobile version. I’ll keep that in mind from now on. Thank you!

Hi @Zerene
To be honest, I love your work.
A few things to take note of when building responsive designs for all screen sizes including mobile versions.
Try to make use of grids, flexbox and media-queries more often.
It’ll come in handy.
Though, personally, I won’t advice you to start from a small screen size first; instead, I will start with a bigger screen size then , start changing the layouts with grids, flexbox and media-queries.
Good luck and happy coding! :grinning:

Hello @Ebuka_Ukoha
Thank you so much! Flex boxes are a little confusing so I try not to use them too much, but I’ll definitely keep that in mind and incorporate them more.