How to fix bullet list issues in Dawn theme?

Solved

How to fix bullet list issues in Dawn theme?

Rob4836
Tourist
7 0 1

I am using the dawn theme and adding a section to the feature product page. Using  <p> & <li> tags, results in a bullet list with random blank bullet lines. When using <ul> & <li> tags results in a nice list with no blank lines but also no bullets.

 

Any suggestions?

Accepted Solution (1)

made4Uo
Shopify Partner
3873 718 1217

This is an accepted solution.

Hi @Rob4836,

Seems like you are acquainted with HTML. You just have to add a list-style: circle. See the link here

To do it inline code, see the code below. 

<p>
<ul>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
</ul>
</p>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 8 (8)

made4Uo
Shopify Partner
3873 718 1217

This is an accepted solution.

Hi @Rob4836,

Seems like you are acquainted with HTML. You just have to add a list-style: circle. See the link here

To do it inline code, see the code below. 

<p>
<ul>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
</ul>
</p>

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Rob4836
Tourist
7 0 1

Thanks. Worked like a charm. 
Do you know how to make hover work? I want to hover over a single word link in html for color change. 

I've tried both: .here:hover {color:#000000;}
and
a:hover {color:#000000;}
 with:  
<li> look <a class="here" style="text-decoration:underline" href="#link">here</a> and see <li/>

 

Thanks

made4Uo
Shopify Partner
3873 718 1217

You can try this code below. Since, you are probably changing a code that is already present, try to use !important. If this helps. Please select as a solution

 

.here > a:hover {
color: #000 !important;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Rob4836
Tourist
7 0 1

That did not work.

made4Uo
Shopify Partner
3873 718 1217

Hi @Rob4836,

It might be best to share your website so I can inspect

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Rob4836
Tourist
7 0 1

The site is shotbagballast.com and the password is oikoss. 
To find the link, go to SHOP and then select the third product (50LB). You will find it in the text section with two columns. This section is named product-text.liquid. I set up a different section named blank.liquid and placed the receiving tag there. I then inserted this section using the customizer further down the same page as the sending anchor link. This seemed to work fine but now its not. Maybe you can tell me why or another approach to linking within the same page. 

made4Uo
Shopify Partner
3873 718 1217

Hi @Rob4836,

 

Sorry for late reply. Here is the code. The color is already black so it will not change in hover. 

#shopify-section-template--15983496757474__1652146410b750a009 > div.container > div.flex-item-right > ul > li:hover {
color: blue;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

felixmpaulus
Shopify Partner
59 0 19

Hey Rob,

 

my app Bloom: Product Feature Bullets gives you full control over such bullet points.

You can get super creative and make use of a lot of functionality.

We have 5-star reviews only and take customer support to heart.

There is a completely free plan available!

Felix ✌️

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.

Transform product photos into interactive 3D models with Fira: AI Video to 3D Model
Boost engagement and reduce returns with immersive shopping experiences.
Easy setup with AI-powered conversion from regular videos to 3D models.