Design comparison
Solution retrospective
Root and default font-size
Instead of setting the font-size to 15px (as mentionned in the style guide). I used 16px*0.9375 = 15px.
:root {
font-size: 0.9375rem;
}
I use a value relative to rem that equals to fifteen if the default font size is 16px instead of 15px directly. I do this to take into account the default font size set by the user agent. It is 16px by default but user may override that value in browser settings.
It allows to take into account the wish of a user to have smaller/bigger text
Not setting font-size on all header elements
I set the font size for h3 but use default UA style for h1 h2.
It works where I tested it but it could be a problem : a user agent could
have values that make h2 bigger than h1 or h2 for example.
A safer thing would be to define it explicitely for h1 and h2
h3 { font-size: 1.3em; }
max-width on content instead of fluidly increasing the margin
In the last challenge I did. I used a system where the margin slowly increase as the viewport widens.
This time I just set a fixed margin. There is a maximum width for the content. It is only when that max width is reached that the margin increase.
It is simpler at the cost of being slightly ugly when the viewport is wide but not wide enough to have reached the max width of the content.
Community feedback
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