Frontend Mentor | Clipboard landing page almost pixel perfect :))) coding challenge solution

Krushna Sinnarkar• 1,080

@krushnasinnarkar

Posted 2 months ago

Hi @goziecode,

Congratulations on successfully completing the challenge! Your solution looks nice.

Here's a detailed guide on how to use em and rem:

Understanding em and rem

em:
- Relative to the font-size of the parent element.
- Useful for scaling an element in relation to its parent.
rem:
- Relative to the font-size of the root element (<html>).
- Provides a consistent scaling factor across the entire document.

Best Practices

Set Base Font Size:
- It is common to set the base font size on the <html> or <body> element.
- Example:
```
html {
  font-size: 16px; /* This means 1rem = 16px */
}
```
- This helps in maintaining a consistent scaling factor. For instance, if you declare html { font-size: 16px; }, then 1rem equals 16px.
Use rem for Global Sizing:
- For elements that need to maintain a consistent size relative to the root, use rem.
- Example:
```
h1 {
  font-size: 2rem; /* 32px if base font-size is 16px */
}
p {
  font-size: 1rem; /* 16px */
}
```

Use em for Component-Level Sizing:

For elements that need to scale relative to their parent, use em.

Example:

.container {
  font-size: 1rem; /* 16px */
}
.container .title {
  font-size: 1.5em; /* 24px (1.5 * 16px) */
}

Combine rem and em for Flexibility:

Use rem for general layout sizing and em within components to ensure flexibility.

Example:

body {
  font-size: 16px;
}
.card {
  padding: 1.5rem; /* 24px */
  border-radius: 0.5rem; /* 8px */
}
.card .title {
  font-size: 2em; /* 32px if .card's font-size is 16px */
}

Use CSS Variables for Flexibility:

Define font sizes as CSS variables for easy adjustments.

Example:

:root {
  --base-font-size: 16px;
  --heading-font-size: 2rem; /* 32px */
}
body {
  font-size: var(--base-font-size);
}
h1 {
  font-size: var(--heading-font-size);
}

Calculating Sizes

Starting with px for Reference:
- Sometimes, it’s easier to start with px values for initial designs and then convert to rem or em.
- Use a conversion tool or simple math: desired size / base size = rem value.
- Example: For a 24px element, if the base size is 16px, 24 / 16 = 1.5rem.

Practical Tips

Responsive Design:
- Using rem ensures that changes to the root font size (e.g., via media queries) cascade consistently across the layout.
- Example:
```
@media (max-width: 768px) {
  html {
    font-size: 14px; /* Adjust base size for smaller screens */
  }
}
```
Accessibility:
- Users can adjust the base font size in their browser settings, and using rem ensures your layout respects these preferences.

Conclusion

By setting a base font size and using rem and em appropriately, you can create responsive and flexible designs. Start by declaring a base font size in the root or body, then use rem for consistent global sizing and em for component-level scaling. This approach ensures your layouts are both responsive and accessible.

Your solution looks nice, though there is a thing you can improve which I hope will be helpful:

Between 1024px and 1200px screen sizes, the .advantages section gets shrunk due to the computer image. You may need to work on it by adjusting widths or margins.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

Marked as helpful

Clipboard landing page almost pixel perfect :)))

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community