Design comparison
SolutionDesign
Solution retrospective
What specific areas of your project would you like help with?
One thing puzzles me about card designs. Is the card size better set in px (so that there is a fixed size) or is it better in % or em. Thank you for your time and for any guidance on the project.
Community feedback
- @Mohamedkabba444Posted 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:
- Set the card container width using a maximum width (max-width) in pixels (px) to maintain a consistent size.
- Use relative units (%) or em for internal elements, such as:
- Padding
- Margins
- Font sizes
- Image sizes
- Utilize CSS media queries to adjust card size and layout for different screen sizes and devices.
Example:
Font Size:
- Fixed size: font-size: 16px;
- Relative size:
- %: font-size: 120%; (relative to parent)
- em: font-size: 1.2em; (relative to parent)
- rem: font-size: 1.2rem; (relative to root)
- Responsive size:
clamp()
:font-size: clamp(16px, 4vw, 24px);
(between min, max)min()
,max()
:font-size: max(16px, 4vw);
(at least) orfont-size: min(24px, 6vw);
(at most)
Height:
- Fixed height: height: 500px;
- Relative height:
- %: height: 80%; (relative to parent)
- vh: height: 80vh; (relative to viewport)
- 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:
- Fixed width: width: 800px;
- Relative width:
- %: width: 80%; (relative to parent)
- vw: width: 80vw; (relative to viewport)
- 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 - Pros:
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord