Bullet Point list in wrapper not alligning text properly

Solved

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

Bullet list.jpg

 Bullet list.jpg

Go sock yourself! -- https://mdksocks.nl
suyash1
Shopify Partner
3013 329 504

@MDKSocks - I see like this

suyash1_0-1617116954401.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
UmairA
Shopify Partner
899 87 178

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.

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing
0 Likes
suyash1
Shopify Partner
3013 329 504

@MDKSocks - add this 

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

.smart-tabs-navigation-li, .smart-tabs-navigation-li:active {border: none;}
You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes

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!

Go sock yourself! -- https://mdksocks.nl
0 Likes

Bullet list.jpg

Like this @suyash1 @UmairA 

Go sock yourself! -- https://mdksocks.nl
0 Likes

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

Go sock yourself! -- https://mdksocks.nl
0 Likes
suyash1
Shopify Partner
3013 329 504

This is an accepted solution.

@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;}

suyash1_0-1617201550547.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes

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

Go sock yourself! -- https://mdksocks.nl
0 Likes
rob10k8
New Member
6 0 0

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:

bullet.jpg

And here is how I want it to look:

bullet-corrrected.jpg

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!

 

0 Likes