Design comparison
Solution retrospective
I have one main question.
How do I get the numbered list to have a gap between the numbers and the text?
I tried a few different things but in the end I couldn't find a solution so I moved on.
A part from that I'm just looking for tips and tricks to simplify my code and make it neater. For example the nutrition table at the bottom. I'm interested to see how everyone else did theirs!
Community feedback
- @dan9hPosted 9 months ago
Hey there! Congratulations on completing your first challenge.
text-indent
only indents the first line of the text/paragraph. You should use eitherpadding-left
orpadding-inline-start
for spacing.You can try the following:
ol li { padding-left: 20px; }
or
ol li { padding-inline-start: 20px; }
You can remove
position: relative;
andmargin-left: 25px
. They have no effect to the layout.And for the nutrition table, well, you can use a
<table>
. š If this element's new to you, check this very helpful MDN article about HTML Tables.Hope this helps!
Marked as helpful1@Harrison-JollyPosted 9 months ago@dan9h Thank you!
Adding padding did the trick. I'm sure I tried that but clearly not. š
0 - @osmanbay90Posted 9 months ago
Great job on completing the Frontend Mentor challenge!
here is css property you can use.
you can use
text-indent
for the text and it will give space between the list bulletpoint and the text.example
li { text-indent: 50px; }
that will move the text to 50px on the right.
other than that your solution looks great happy coding.
2 - @Bright-AnyawePosted 9 months ago
Wow, that awesome. You've got it all on point, try the following;
The following syntax will create space between the bullet list and the text items:
ul li { padding-left: 9px; }
This will create space between the bullet list and the text items
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