Blog preview card solution

Community feedback

• 

  P

  Mohamed Kabba•220

  @Mohamedkabba444Posted about 2 months ago

  For card design sizing, it's generally recommended to use a combination of units for flexibility and responsiveness. Here's why:

  Fixed size (px):

  • Pros:
    • Easy to control exact size
    • Simple to implement
  • Cons:
    • Not responsive; may not adapt well to different screen sizes or devices
    • May cause layout issues or overflow

  Relative size (% or em):

  • Pros:
    • Responsive; adapts to parent container or font size
    • Flexible and scalable
  • Cons:
    • May require additional calculations for layout
    • Can be less predictable

  Hybrid approach:

  • Use a fixed width (px) for the card container, and relative units (%) for internal elements (e.g., padding, margins).
  • Use CSS media queries to adjust card size based on screen size or device.

  Recommended approach:

  1. Set the card container width using a maximum width (max-width) in pixels (px) to maintain a consistent size.
  2. Use relative units (%) or em for internal elements, such as:
     • Padding
     • Margins
     • Font sizes
     • Image sizes
  3. Utilize CSS media queries to adjust card size and layout for different screen sizes and devices.

  Example:

  Font Size:

  1. Fixed size: font-size: 16px;
  2. Relative size:
     • %: font-size: 120%; (relative to parent)
     • em: font-size: 1.2em; (relative to parent)
     • rem: font-size: 1.2rem; (relative to root)
  3. Responsive size:
     • clamp(): font-size: clamp(16px, 4vw, 24px); (between min, max)
     • min(), max(): font-size: max(16px, 4vw); (at least) or font-size: min(24px, 6vw); (at most)

  Height:

  1. Fixed height: height: 500px;
  2. Relative height:
     • %: height: 80%; (relative to parent)
     • vh: height: 80vh; (relative to viewport)
  3. Responsive height:
     • clamp(): height: clamp(400px, 60vh, 800px);
     • min(), max(): height: max(400px, 60vh); or height: min(800px, 80vh);
     • min-height, max-height: min-height: 400px; or max-height: 800px;

  Width:

  1. Fixed width: width: 800px;
  2. Relative width:
     • %: width: 80%; (relative to parent)
     • vw: width: 80vw; (relative to viewport)
  3. Responsive width:
     • clamp(): width: clamp(600px, 60vw, 1200px);
     • min(), max(): width: max(600px, 60vw);` or width: min(1200px, 80vw);
     • min-width, max-width: min-width: 600px; or max-width: 1200px;

  These units and functions enable flexible, responsive designs that adapt to various screen sizes, devices, and orientations.

  0