Responive Product Preview Card Using CSS Grid and Flexbox

Community feedback

• 

  Mirza Monirul Alam•680

  @WebDevMirzaPosted almost 2 years ago

  Hello, congratulations on completing this project successfully.

  Your query was how to use units in css. Well, there are two types of unit available in css. One is absolute unit and the other one is relative. If you design a responsive layout, you should go for relative unit. Both em and rem are relative unit based on parent and root font size respectively.

  • rem is the best for font-size.
  • bootstrap and tailwind use these relative units, even in margin and padding.

  NB: This does not mean that px is useless. Use it when you feel it.

  Thank you.

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center .product on the page using grid, replace align-items: center with align-content: center. when centering items in grid, justify-content goes with align-content and justify-items goes with align-items. unlike flexbox which is always justify-content and align-items.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0