
Recipe page using tailwindcss, next.js, flexbox
Design comparison
Solution retrospective
In the past, I wasn’t able to implement styling that wasn’t part of the previous assignments. I believe I have learned quite a few new techniques this time. However, I still feel that the styling isn’t quite appropriate, so I hope to be able to apply more suitable styling in the future.
What challenges did you encounter, and how did you overcome them?Since we couldn't style the list markers directly, we addressed it by using the ::before
pseudo-element for the ul
tags and a span tag for the ol
tags.
If you know any best practices for styling list markers, I would appreciate your insights.
In this project, we needed to style list markers, but since we couldn’t style the list markers directly, we handled it by using the ::before
pseudo-element for ul
tags and a span tag for ol
tags.
Is this styling approach appropriate? And if there is a more suitable method, please let me know.
If you have any insights, I would greatly appreciate it.
Community feedback
- @NunoJDMachadoPosted 11 days ago
It's looking good overall. Just need to work on the image which I think is the most glaring issue. If you compare with the design screenshot you'll see it is being squished/distorted. Also visibile if you resize the window to test for responsiveness. I would avoid any fixed widths/heights for the image and just let it adapt to the container size.
As for colouring the list markers, what worked for me was to give the whole <li> the colour I wanted the marker to be, and then inside them create <span> or <div> elements to style the text colour.
0
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