product-preview-card using css flexbox

Community feedback

• 

  imLumarq•210

  @imLumarqPosted over 1 year ago

  Hi @Ali-El-Shoraa

  Congratulations on completing this project.

  1.I would suggest using the "em" unit for your media queries.

  /*your code*/
  @media (max-width: 767px) {
  .box { in that one
  flex-direction: column;
  }
  }
  
  /*modified code*/
  /*767px*/
  @media (max-width: 47.9275em) {
  .box {
  flex-direction: column;
  }
  }
  

  2.Give this article a read: PX, EM or REM Media Queries?

  3.Coding multiple media queries with the same break points is redundant in my pinion. Just use one and put all the code changes you would like to make in that one media query.

  Here's my solution:

  https://www.frontendmentor.io/solutions/product-preview-card-FyiG1l-E-s

  I hope you find this helpful 😄!

  Happy Coding!

  Marked as helpful

  0

  ---

  

  Ali-El-Shoraa•130

  @Ali-El-ShoraaPosted over 1 year ago

  Thank you very much. This really helped me. On the second point, the article helped me a lot. With regard to the third point, I am used to dividing media queries so that it is below each section in the code for quick reference... Sorry if there are spelling errors or something wrongly translated because I use Google Translate @imLumarq

  0