Strange Pasta Lover | Product Landing Page

Hello! I learned not to code when you’re hungry. :laughing:

Do you think my product landing page looks delicious?

https://codepen.io/mosakay/pen/bGBOGyN

Hey there,

nice to see you again with your next project, making great progress! :+1:


My ideas:

  • all tests pass, awesome!

  • HTML validation and CSS validation show no errors! :clap:

  • when I decrease the width of my browser, the video overflows their parent:

  • the content of the products gets also squeezed:

  • good responsive design is not that easy; tip: start with the small layout first (= mobile-first design); then increase the width of the window and make your adjustments; this will decrease the complexity of your design and make it easier to handle responsiveness


Looking forward to seeing your next steps.

1 Like

Hey there, thank you for your feedback!!! @miku86

First problem solved with overflow: hidden to the class product-section, I know that doesn’t look so good but I don’t know how to make the video responsive… which means I need to make 10 media queries.

EDIT: Ok, found this for the video, width: 80%; height: 300px; and works great. Cheers!

The second problem with the content of the cards I know why, because I have done the width of the card with the margin: 0rem 10rem of the p tag. I think that’s why.

EDIT: All the problems solved!

And you are right. Making a good responsive design is not easy at all… Thank you for your tip! In my next projects, I will do that!

1 Like