Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Cards Section w/ CSS grid and 2 breakpoints

Yuko Horita• 645

@Sloth247

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Community feedback

Vanza Setia• 27,835

@vanzasetia

Posted

👋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

2

Yuko Horita• 645

@Sloth247

Posted

@vanzasetia Thanks, I'll fix it based on your suggestion. Just a question for the font size on html, I looked at your sass file for this project and you did not seem to convert the font-size to the default 15px. I am seeing that you write font-size: rem(15) in body, does this means 15px? I have never seen and learnt this style of unit, so I'm just curious.

0
Vanza Setia• 27,835

@vanzasetia

Posted

@Sloth247 It's a custom Sass function (not CSS) that I created to convert px to rem. So if I write rem(16), it will convert it to 1rem.

The body font size will make p tag or any elements that inherit body font size to be 0.9375rem ( is equal to 15px) as default font size.

So, you can change the body font size using rem unit however you like, but don't change the html default font size, which is 100%.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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