
Solution retrospective
I think I coded cleanly and learned so much in the process.
What challenges did you encounter, and how did you overcome them?I tried so much to vertically center the bullets relative to the li
elements when the text is more than 1 line; but I couldn't.
I am open to any feedbacks. but if anyone knows how to vertically center a bullet relative to the li
element, please comment the solution.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Islandstone89
HTML:
-
<main>
holds all of the main content on a page. As a card would likely not be the only component on a page, I would wrap the card content in a<div class="card">
inside the<main>
element. It's also possible to use an<article class="card">
. -
You should not include words like "image" or "photo" in the alt text, as screen readers announce images with "image", followed by the alt text.
-
Beware that the
<section>
element by default doesn't have any semantic meaning. It has arole
ofgeneric
, which is the same as a<div>
. To give it arole="region"
in the Accessibility Tree, you need to give the section heading anid
, which is then referenced by the section usingaria-labelledby
:
<section class="ingredients" aria-labelledby="ingredients-title"> <h2 class="section-title" id="ingredients-title">Ingredients</h2>
CSS:
-
It's not recommended to use
%
for properties likemargin
,padding
,width
,height
orborder-radius
. -
I'll refer to the demo showing how to vertically center custom list bullets. You need to remove the default bullets (you have
list-style: none
in your CSS Reset, but it only applies to lists with arole="list"
). Create a::before
pseudo-element with the samewidth
andheight
andborder-radius: 50%
andaspect-ratio: 1 / 1
. It also needs abackground-color
,content=""
anddisplay: block
.
Marked as helpful -
- @Barnabas001
Excellent webpage, site is responsive and look good on all screen size, good job overall
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