Responsive Blog Preview Card using Absolute Positioning and Transforms
Design comparison
Solution retrospective
Making the site responsive on all screens, from desktops to small mobiles. It even supports mobiles in landscape mode. Also, I wrote the code in a very clean and organized way.
What challenges did you encounter, and how did you overcome them?Not any really.
What specific areas of your project would you like help with?How can I implement responsive typography page-wide? I would like some links to guides on this topic.
Community feedback
- @N1DovudPosted 8 months ago
To have a responsive font size or responsive page as a whole try to use rem instead of pixels. REM is the root font size which as default is 16 px. What's cool is if you change the rem in your media query based on the screen sizes, you can easily make your fonts, padding, margin very responsive.
0 - @daniel-howorthPosted 8 months ago
Set the line-height to 1.5 to comply with accessibility standards and give it a neater look. It's good practice to apply this globally in the body selector.
Well done on completing the challenge!
0 - @Medido1Posted 8 months ago
Great work!! if you look at the design of the active state, you can see that there is an increase in the box shadow of the container when hoverd over, you should consider adding that to your code
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