Product preview card component solution using css flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  Hello Oussama, congratulations for your second solution.

  You've a really good work with this challenge, you did right pretty much everything.

  I've two tips to help you improve a little bit the responsivity of the container in the mobile version:

  1.The font-size, note that in the design files, for the mobile version, the h1 and p are a little bit smaller in comparison to the desktop version. So you can apply this text changes to the media query you've implemented to change the container flow vertically. In my solution I've set for the mobile version the h1 with 28px and the p with 14px

  2.The price section is perfect, but you can note that in a mobile screen under 280px the information inside this section start to be to much close and if you stretch the screen, these information pop ou from the container. You can make this section super flexible if you add to the media query flex-direction: column; or flex-wrap: wrap to make the content break a line when gets too much closer to each other.

  @media (max-width:280px) {.price { display: flex; flex-direction: column;} }

  3.You've missed the hover effect in the button, but thats a tiny detail.

  I hope this helps you to improve your solution, but know that I liked a lots the result you get.

  Happy coding.

  Marked as helpful

  0

  ---

  

  Oussama Elhousni•190

  @oussamaelhousniPosted over 2 years ago

  @correlucas thank u very much lucas i will try to apply your notes

  1

  

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  @oussamaelhousni you're welcome Oussama, then say me if this tips fixed your solution. ✌️

  0