Responsive Four Cards

Community feedback

• 

  Fatma Tawfeek•110

  @Fatma-TawfeekPosted 3 months ago

  You've done a great job laying the foundation for a well-structured, responsive layout! Here are a few suggestions to make your CSS even better:

  • Headings Padding: Instead of padding-inline: 6rem; for headings, consider using margins or flexbox for better alignment across different screen sizes.

  • Font-size Scaling: Setting html { font-size: 62.5%; } is great for easier rem calculations, but overusing it in media queries (e.g., 50% on small screens) may cause text to become too small.

  • Responsive Design: Your media queries cover different screen widths, but setting body { max-height: 13.6rem; } in one query could squash your layout on smaller devices. It's better to adjust padding or layout proportions instead.

  • Grid Class: There’s a class called grid { gap: 1.5; }, but it seems incomplete. Ensure the unit (rem, px, etc.) is specified for the gap value.

  • Card Dimensions: Fixing card width and height might make it less flexible on smaller screens. Using relative units or setting max-width/min-width may improve responsiveness.

  Marked as helpful

  0

  ---

  

  Aamir Khan•130

  @AamnbabaPosted 3 months ago

  Thank you @Fatma-Tawfeek, i will work on your advice to improve.

  1