Hi again @Godskitchen!
Congrats on another successful solution to another design challenge! ✅ Your solution seems to match the design perfectly.
Things I think you did amazingly well in your solution 🎉:
- The use of clear and well structured semantic HTML
- The use of SASS for your CSS
- The inclusion of a hidden
h1
tag for accessibility
Here's something to consider thinking about 🤔, similar to my comment on your solution to the QR code component design challenge:
In your CSS file (lines 19-27):
html {
font-size: 1.1111111111vw;
height: 100%;
}
@media (max-width: 768px) {
html {
font-size: 4.2666666667vw;
}
}
This effectively resets the rem (root em) value and makes a big jump as you go from a 768px screen width up to a 769px screen width:
- 769px * .011111111111 = 8.54px
- 768px * .042666666667 = 32.768px
The result is that your solution ends up in a place that matches the design when you get either to 1440px (the desktop design) or 375px (the mobile design). However, when the screen size is different than those key sizes (especially right around 768px), the solution can do some funny things that I'm not sure you intended.
You might consider taking out the media query all together. Instead, you can obtain fluid typography at different screen sizes by taking advantage of the vw
units inside of a clamp
function. The clamp
function ensures that the font sizes never get too small or too large by setting the lower and upper boundaries with a fluid size in between. Here is a great resource for learning more about this approach:
https://web.dev/learn/design/typography
I hope you find my feedback helpful! 🌟
Happy coding! 😎
Marked as helpful
@Godskitchen
Posted
Hi again @elisilk! I've followed to your advice and have read some info about fluid typography. After that I replaced media queries to clamp funcs for font-size. Looks good, thank you!