Skip to content
Submitted over 4 years ago

Mobile first with Grid & Flexbox

P
Nate Northway•190
@nnorthway
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I can't seem to get the font-sizing on the hero to scale perfectly. Any advice? I set the base font size to 16px as suggested in the style-guide. Also, box-shadows are so hard to get perfect. Any advice there?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Samuel Palacios•615
    @samuelpalaciosdev

    Hello Nate, hope you're good!👋

    I've been seeing your source code, and as I imagined, you put some predefined width for your header text container element (.hero-body) , using predefined widths usually is not the best alternative, it could cause you a lot of problems when talking about responsiveness.

    Regarding your question, I saw that yout put the font-sizes using em units, they aren't the best option to set font-sizes, and maybe could case you some problems. I would change the (.hero-body p) font-size to= 16px, remove the predefined width on the (.hero-body) and change it for an max-width of 550px. Also I would change the (.hero-body) padding to 2em 1em; to scale better with the design.

    I suggest to see this video about css em units: https://www.youtube.com/watch?v=pautqDqa54I&ab_channel=KevinPowell.

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