Four-Cards-Preview

Community feedback

• 

  P

  Mohamed Kabba•220

  @Mohamedkabba444Posted 2 months ago

  Great job on your design! The layout and visual elements are well-executed. However, I noticed that the design isn't fully responsive. To improve this, consider the following adjustments:

  Container and Grid Structure:

  1. Create a container element for the four cards.
  2. Inside the container, create a div wrapping the two center cards.
  3. Set the container to display: flex for flexible layout.
  4. Set the inner div to display: grid for easy card arrangement.

  Responsive Units:

  1. Use rem, em, clamp(), min(), and max() for setting:
     1. Width and height
     2. Font sizes
     3. Padding and margins

  Example: .card-container { display: flex; align-items: center; justify-content: center; gap: 1rem; }

  .card-inner { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1rem; }

  .card { width: clamp(20rem, 50%, 30rem); padding: 2em; font-size: 1.5rem; }

  By implementing these changes, you'll:

  1. Achieve a responsive card layout
  2. Improve flexibility for different screen sizes
  3. Enhance accessibility with relative units

  Keep up the fantastic design work! Looking forward to seeing your next project.

  0