responsive product card created using css +html

Community feedback

• 

  Daniel Barda•240

  @daniel-bardaPosted 11 months ago

  Hi,

  I haven't checked on mobile, but on desktop, the layout is not displayed correctly because you forgot to set grid-template-columns in .product-box-grid.

  Additionally, I highly recommend avoiding the use of pixels (px).

  This is because pixels do not respect the user's browser font size.

  I suggest always using rem instead.

  Furthermore, I'm attaching an article that could be very helpful for your future projects.

  Good luck moving forward! 😊

  Pixels vs. Relative Units

  62.5% Font Size Trick

  Marked as helpful

  0

  ---

  

  Naglaa Raslan•580

  @codeAndcocoaPosted 11 months ago

  Thank you for your feedback, I appreciate it 🙂 🙂

  For the desktop layout, I set the grid columns property in the media queries section, not the main one and it works fine with me so kindly wait for a couple of minutes then refresh the page.

  Concerning the pixels(px) I am not sure if you mean that I used pixels in the font-size property because I used (em) and (vw) for this one. and for the articles thank you very much I will read them of course; 🙂 @daniel-barda

  0

  

  Daniel Barda•240

  @daniel-bardaPosted 11 months ago

  @naglorias

  You should define grid-template-columns in .product-box-grid, not only in media query.

  This is because media queries are conditions that define how the CSS code will behave according to the screen size.

  Therefore, setting the grid column values ​​in a media query will only be valid for a certain screen size.

  Instead, you need to set the grid-template-columns property in the class Selector ("main"), which, in our case, is .product-box-grid.

  This will make them valid for any screen size, and then we'll use a media query to adapt our layout to different screens.

  Now I will answer the second part.

  You did use rem.

  But note that in class .product-box-grid you used

  max-width: 860px;
  height: 580px;
  

  For values ​​of this type I would recommend using rem.

  Of course, small things like border-radius: 9px or letter-spacing: 5px; It is fine using px because it is a small value.

  I hope it is now makes more sense to you.

  In addition, I recommend reading the article I attached to you earlier, the trick of 62.5% font size.

  I'm sure it will help you a lot in the future.

  Marked as helpful

  1

  

  Naglaa Raslan•580

  @codeAndcocoaPosted 11 months ago

  Oh yes, I get your point and everything make sense now and thank you for the articles and for your help @daniel-barda

  1