🍀Advice Generator - Vanilla JS with a touch of my private library
Design comparison
Solution retrospective
What is your solution to exactly matching the font size to the files provided by the "frontendmentor"? In the style guide, the font is 28px but it looks to me bigger than the one in the design images.
[Solved thanks to @Appz-dk solution] -- Also, I've noticed that the quotation marks in the design image are different than the default ones in the provided font. What is your best solution to change those quotation marks?
One other thing that is bothering me is the Layout shift. Since the text is coming from an API and it takes time, before that the height of the text is 0, and when it's getting loaded, it will shift the layout which results in a bad Lighthouse score. What solution do you propose for that?
I appreciate you taking the time and sharing your thoughts. Have a good one and see you soon 🍀
Community feedback
- @Appz-dkPosted over 1 year ago
I've noticed that the quotation marks in the design image are different than the default ones in the provided font. What is your best solution to change those quotation marks?
You have to use a <q> </q> tag to get the right quotation marks (Check my solution for inspiration if you want to)
Marked as helpful0@kimaginPosted over 1 year ago@Appz-dk Thank you so much for this brilliant solution. I've fixed it and it's now showing the correct quotation marks.
0
Please log in to post a comment
Log in with GitHub
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