Almost reponsive design for a product card

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  Hey @l3miage-bouvier5!

  Your project looks great!

  • The first suggestion I'd give you is to try starting the projects using the mobile first approach. It's not completely necessary, but helps you a lot when using media queries to create the tablet and/or deskto versions.

  • I've noticed that your max-width:550px media queries are making your project behave very differently. For example, you used height: 100vh; and width: 100vw; for your main, and your card is inside that. Most times, is better setting these properties for the body, not the main.

  I hope it helps!

  Marked as helpful

  1

  ---

  

  MonsieurBoubou•70

  @l3miage-bouvier5Posted 12 months ago

  @danielmrz-dev Thanks ! it helps a lot i will improve it. So the vw and vh can replace some media queries ? it makes the site responsive because its calculated on the size of the device, right ?

  1

  

  Daniel 🛸•44,310

  @danielmrz-devPosted 12 months ago

  @l3miage-bouvier5

  Using vh and vw do not replace media queries.

  They calculate width and height on the size of the device, but they don't change the arrengement of the elements!

  For example, if your mobile version is vertical and your desktop version is horizontal, simply using vh and vw won't change this arrengement.

  0

  

  MonsieurBoubou•70

  @l3miage-bouvier5Posted 12 months ago

  @danielmrz-dev Oh ok i got it, thanks

  1