Design comparison
Solution retrospective
I used variable fonts on this one. First time setting that up so it was quite fun. I added fun variable hover states to the title, learning badge, and attribution in footer. I see the potential with variable fonts. Cant wait to use them more!
I also wanted to make this so no media queries where needed but I did end up using a few for when a phone was very small. Other than that its fully responsive out the box.
What challenges did you encounter, and how did you overcome them?The article title and description would not scale. They where responsive and reduce in size but I wanted them to scale down without the use of media queries. In the end i did use media queries if screen is at very small size. It works.
Fun challenge.
What specific areas of your project would you like help with?How can I achieve the article text and description to scale without using media queries? For some reason I could get everything else to scale responsibly except those. They would still be responsive but did not scale. So in the end I utilized media queries. Which is fine, but i'd like to design without the need for them.
Community feedback
- @JomagenePosted 3 months ago
Hi @James Niemerg,
I love the creativity you've shown with the use of variables and how your submission is almost pixel-perfect with the design. Cheer up! It's clear you enjoyed experimenting with them.
Your goal to avoid media queries and still achieve a responsive design is impressive and not always easy to achieve.
Regarding your challenge with scaling the article title text size and description without media queries, here's a mathematical approach that might help:
To achieve scalable text, you can use the formula of a line passing through two points. Let's take the following points: for a large screen (1440px), 1rem equals 16px, and for a small screen (375px), 0.875rem equals 14px. These points can be represented as (1440, 16) and (375, 14).
Using the formula for a line passing through two points, we can derive the following equation to calculate the font size based on the viewport width (vw):
font-size: calc((2/1065) * 100vw + 13.298px);While it involves some mathematical effort, it can be a fun and effective solution. However, using media queries is also perfectly fine and more straightforward.
Thank you for sharing your project, and keep up the great work!
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