Strange Pasta Lover | Product Landing Page

[Mosakay]

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

Do you think my product landing page looks delicious?

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

[miku86]

Hey there,

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

---

My ideas:

• all tests pass, awesome!

• HTML validation and CSS validation show no errors!

• 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.

[Mosakay]

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!