Submitted almost 4 years ago

Four Cards Section w/ CSS grid and 2 breakpoints

Yuko Horita•645

@Sloth247

A solution to the Four card feature section challenge

Preview Code

Solution retrospective

I set 2 break points to make the cards look better. Any feedbacks are welcome!

Code

Please log in to post a comment

Community feedback

Vanza Setia•27,715
@vanzasetia
Posted almost 4 years ago
👋Hi Sloth!

I have some feedback on this solution:
- p tags should never be a children of h1 instead I recommend to use this markup.
```
<h1>Reliable, efficient delivery 
  <span>Powered by Technology</span>
</h1>
```
- I recommend to use header tag since the class name is header so it becomes more semantic rather than div
- Your BEM is for this class card card__supervisor, I recommend to change it as a modifier like this card card--supervisor.
- I recommend to leave the default html font size which is 100%. The problem with setting it to 62.5%, it will make the user that has bad vision have to zoom a lot since it will always 62.5% of the current size. Yes, it makes developer easier to calculate 1rem but the purpose is not about what convenient for the developer, it's about what convenient to the user.
That's it! Hopefully this is helpful!
Marked as helpful

Join 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