Bullet Points and Numbers Not Working on Product Descriptions (SCSS Debutify)

Bullet Points and Numbers Not Working on Product Descriptions (SCSS Debutify)

AutoFXWA
Tourist
9 0 2

I was previously having trouble with having invisible bullet points and bullet points with no indentation. After using the following code:

.smart-tabs-content-wrapper li { list-style: initial; }

I still have yet more issues. I have asked the community twice now but no one keeps providing help and so I have to keep making new questions so I actually get more answers.

I have bullet points now, the issue is the indentation. They don't sit to where they should on the product pages they just align to the left like normal text. Also when I use the numbered bullets, they only show as a bullet point which is better than nothing but they align so far left they are almost outside of the description box. The things to note section is bullet points and the how to use it section is the numbered bullets.

Capture 2.PNG

Previously I used the code:

#collapseOne ol, ul {
margin: 18px;
padding: 0;
}

Which gives the indentation I would like but still had invisible bullets. So I added the code above and it overwrites the indentation code so now I have bullet points that are visible but no indentation.

 

This is a problem across all product descriptions. Someone please help.

Replies 5 (5)

dmwwebartisan
Shopify Partner
12368 2558 3743

@AutoFXWA 

Welcome to the Shopify community.

I have read your problem. please share your store URL!

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
PageFly App to customize your pages | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
12368 2558 3743

@AutoFXWA 

Please add the following CSS to your assets/theme.scss.liquid bottom of the file.

.smart-tabs-wrapper ol, .smart-tabs-wrapper ul {
    margin: 0 18px !important;
    padding: 0;
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
PageFly App to customize your pages | The most powerful Shopify page builder app
AutoFXWA
Tourist
9 0 2

@dmwwebartisan 

Thank you, I added the code which gave better indentation but wasn't enough so I doubled to 36px and now it looks like what it should be from the product description editor in Shopify.

 

However I am guessing there is no way with these codes that I am able to utilise both numbered points and bullets? Because the last issue now is being able to have both bullet points and numbered points in my descriptions...

prosperaC
Visitor
1 0 0

Hi Everyone, I know this post question has been backdated since year 2021, but hope what I had tested helps.  There's literally no codes at all to amend.  Before you do this, you have to unlock your password on website, and open a live view website on another google page.  Then, Just go to your Product in Shopify, at the product description, as you noticed which word is out of indent or out of alignment, Let's say after the bullet, there is an indent, you just click bullet and then space it a little.  I noticed my paragraph was not in sync with the bullet as per entire sentence, but after I press Shift key wit Enter, the word drops down below the bullet - then I just add 5 more space - and Voila.. ! all nicely aligned perfectly