responsive card using flex

Community feedback

• 

  Mustafa Sen•3,180

  @mustafasen97

  Posted about 1 month ago

  You have created a great design.

  I would like to help you with a few things.

  First of all, you can center your design on the screen with flexbox by adding the following codes to the body section.

  body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  }
  

  There are many measurement units you can choose for responsive design.

  Which Units Should Be Used When?

  |      Use Case        |   Currently Used      |             Improvement Suggestion                   |
  | -------------------- | ----------------------- | ------------------------------------------------------------ |
  | Margin spacing       | `rem`, `min()`          | ✅ `rem` is good; consider using `clamp()` for responsiveness |
  | Padding spacing      | `rem`, `px`-like values | ✅ `rem` works well; `%` or `clamp()` can add flexibility     |
  | Font sizes           | `small` keyword         | ❌ Prefer `rem` or `clamp()` for consistency and control      |
  | Image widths         | `%`                     | ✅ Perfect for responsiveness                                 |
  | Card/container width | `max-width: 650px`      | ✅ Reasonable for desktop layouts                             |
  
  

  Additionally, you can try mobile-first design for margin/padding usage specific to responsive design. You can design for mobile devices first and then adapt it to desktop.

  To summarize, for Margin/Padding:

  • Try write mobile-first.

  • Prefer flexible units like rem, em, % or clamp().

  • A more modern and simple approach is to adjust the spacing according to the screen size using clamp() instead of media query.

  Understanding the clamp may be difficult at first, but with practice you will understand. Then you can make responsive designs in a more practical way.

  I wish you success in your future designs.

  00