Recently, I started working on web development and came across an issue. While designing a mobile website, the list text was breaking into a second line, making it look unattractive. I wanted to adjust the second line to align with the start of the text. My current framework is bootstrap 5.
This is how my list currently looks: View
I want it to look like this: Desired Look
HTML
<div class="col">
<ul>
<p class="col align-self-center">
<li><i class="fa-solid fa-fish"></i>5% marketing and strategic alliances</li>
<li><i class="fa-solid fa-fish"></i>10% Metadata release (Rarity tools) Focus on community growth</li>
<li><i class="fa-solid fa-fish"></i>25% Listing in Magic Eden</li>
<li><i class="fa-solid fa-fish"></i>50% First Donation to partners</li>
<li><i class="fa-solid fa-fish"&
gt;</i>65% Increase in marketing investment</li>
<li><i class="fa-solid fa-fish"></i>80% Bluepaper Publication of Phase 2</li>
<li><i class="fa-solid fa-fish"></i>100% Second Donation to partners</li>
</p>
</ul>
</div>
</div>
CSS
.Roadmap-body li {
list-style: outside;
padding: 0% 0% 5% 0%;
text-align: left;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.fa-fish{
padding-right: 7%;
}
Thank you in advance for any help provided!
EDIT: I changed the ui tag to ul, now the design looks like this see image description here