Design comparison
Solution retrospective
arranging the bullets in center with different colorsm
Community feedback
- @wendyhamelPosted about 2 months ago
Hi,
You can change the color of the bullets with
li::marker { color: #7B284F }
if you use the original list style items. They will be centered automatically too, so that solves two problems at once.Another solution is to set your list items as
display: flex
withalign-items: center
. This will set your custom::before
bullets to center horizontally.Apart from your question, I noticed a few other thing you may want to consider to improve your solution to this challenge.
The image of the recipe stretches horizontally on screens between mobile and desktop. As this image is not a background,
background-size: cover
has no effect. On an image you can useobject-fit: cover
and you may want to remove the set height restriction of 150px to prevent the image from being cut off top and bottom. But only if you don't like it to stay a set height.Happy coding!
Marked as helpful0
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