Responsive product card using CSS Grid and Flex

Community feedback

• 

  Aimal Khan•2,260

  @Aimal-125Posted over 1 year ago

  In your css code, use % units in .page class. It will responsify your card component.

  Marked as helpful

  1

  ---

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted over 1 year ago

  @Aimal-125 Okay thank you

  0
• 

  Frieden•260

  @Amanmawar17Posted over 1 year ago

  Heyy! buddy, there is more margin between the paragraph and the heading, what you can do that reduce some margin and increase the font size of the heading? In content, every element should take the same gap as of other elements. You can achieve this by giving content class div tag, grid with gap property of 15px i guess and include button in it. About your button remove div tag and img tag from it and add span tag and put your svg in it and then write ""Add to Cart"" and apply margin right to span. Thank You .

  Marked as helpful

  0

  ---

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted over 1 year ago

  @Amanmawar17 Your comment was really helpful, but i didn't totally understand what did you mean with the gap inside the content ? like grid-row-gap ?

  0

  

  Frieden•260

  @Amanmawar17Posted over 1 year ago

  @Mahmoudamin11 Yes but the gap had shorthand for the grid-row-gap and grid-column-gap

  Marked as helpful

  0

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted over 1 year ago

  @Amanmawar17 yeah i know this shorthand thank you for your notice

  0