
Responsive Recipe Page with core HTML & CSS
Design comparison
Solution retrospective
I would use custom list markers next time if I did this challenge. Because, on mobile view, you can see in the preview screenshot that, list markers are vertically aligned with list item and it is hard to do it with default list marker.
What challenges did you encounter, and how did you overcome them?I was not able to set <ul>
and <ol>
tags markers' font styles, and I found out that one should use font shorthand property in order to set them. Also, as I did not use custom list markers, it was challenging to vertically align them for mobile screens when text would wrap, so I used a trick of hiding default marker and adding marker with ::before
pseudo-element
what approach to class styling would be better?
Community feedback
- @bhuvi819381Posted about 2 months ago
Great work there
For precise design matching, I recommend using the Chrome extension "Pixel Perfect" by WellDone. This tool overlays the design image onto your solution, making it easier to achieve perfection.
1
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