Bullet Point list in wrapper not alligning text properly

[MDKSocks]

Dear community,

I am stuggling with something that should be very simple to fix in my opinion, I am not the best in CSS tho! I want my text to be alligned like it normally is when you use a bullet list in word etc. But somehow the wrapper screws it up. List-style is set on inside because otherwise the points would be on the edge of the wrapper and it looks even worse. (list-style: inside)

How do I get is as below in the image, so I have my text alligned and the bulletpoints are still in the wrapper. I think it should be very simple but all the solutions I find are not working for me. The website is mdksocks.nl

[suyash1]

@MDKSocks - I see like this

[UmairA]

Hey there @MDKSocks ,

Add the following code to your theme.scss.liquid (or theme.css) file

#smart-tabs-content-0 {
border: none !important;
}

Hope it helps.

[suyash1]

@MDKSocks - add this

.smart-tabs-content-block {border: none;}

.smart-tabs-navigation-li, .smart-tabs-navigation-li:active {border: none;}

[MDKSocks]

Sorry guys. I didnt copy the border in the example. It is about the text alligment and not the border, I am sorry! The border obviously needs to stay, the text needs to be better aligned!

[MDKSocks]

Like this @suyash1 @UmairA

[MDKSocks]

You are not gonna tell me there is no way to fix this?

[suyash1]

@MDKSocks - please add following css to the end of theme.scss and check , I see like in screenshot

.smart-tabs-content-wrapper li {list-style: outside;    margin-left: 1em;}

[MDKSocks]

@suyu Thank you you absolute legend!!! What do you think about my website? Do you think it looks good?

[rob10k8]

I’m trying the same thing, but I’m using an accordion and I cannot get the bullet points to indent correctly.

Here is how it currently look on my product page:

And here is how I want it to look:

I am using out of the sandbox turbo, and I tried some of the solutions here but for an accordion, instead of a smart tab, but I can’t get it to work.

Any help would be appreciated.

Thanks!

[MDKSocks]

There solution from suyash1 worked for me!

[Samboi]

@suyash1 I noticed that you indicated to add this code to theme.scss. By chance, did you mean theme.css? I tried to add it to the end of theme.css and it is not working. Please advise if you have any further suggestions.

[suyash1]

@Samboi - can you please share your website link?

[rob10k8]

If you have some time, can you take a look at www.nootkas.com? Here’s a page with the issue:

https://www.nootkas.com/collections/womens-slippers/products/womens-astoria-wool-house-slippers

Thanks!

[suyash1]

@rob10k8 - please add following css to the end of your styles.css and check, should look like screenshot below

,accordion li{text-indent: -20px;}

[rob10k8]

Perfect!

Thank you!!

[ddbabii9669]

This worked for me! I was having the awkward text handing left when using Bullet Lists in the Product Accordion section. Added the code below to this location —> assets/section-main-product.css

.accordion li {
  text-indent: -20px;
}