P
@james-rod
Posted
Congrats, on completing the project! I got a tips that can help: When you are adding an unorderlist with list-items you can use the list-style-image: url(''); which will replace the bullet points to the icon image!
ul{
display: flex;
flex-direction: column;
gap: 10px;
list-style-image: url("assets/images/icon-list.svg");
padding: 20px;
width: 300px;
}
Next for your image container if you want the whole Image to be full then here my solution:
index.html
<div class="img-container">
<img class="desktop-img" src="assets/images/illustration-sign-up-desktop.svg" alt="img-desktop">
</div>
style.css
.img-container{
padding: 20px;
}
Hopes this helps!
0
Sahil Ahmed• 360
@Zeddxx
Posted
@james-rod I tried this method but the alignment of the list-style-image: url('img.svg'); with the text wasn't getting center.
0
P
@james-rod
Posted
@Zeddxx You can center it vertically this way: Hope this helps!
<ul>
<li><span>List item 1</span></li>
<li><span>List item 2</span></li>
<li><span>List item 3</span></li>
</ul>
ul {
list-style: none;
padding: 0;
}
ul li {
display: flex;
align-items: center;
list-style-image: url('img.svg');
padding-left: 20px; /* Adjust the padding as needed */
}
ul li span {
display: inline-block;
vertical-align: middle;
}
0
Sahil Ahmed• 360
@Zeddxx
Posted
@james-rod sure! will try from next time 😊
0
