Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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;}
@MDKSocks - I see like this
@MDKSocks - add this
.smart-tabs-content-block {border: none;}
.smart-tabs-navigation-li, .smart-tabs-navigation-li:active {border: none;}
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!
You are not gonna tell me there is no way to fix this?
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;}
@suyu Thank you you absolute legend!!! What do you think about my website? Do you think it looks good?
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!
There solution from suyash1 worked for me!
@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.
@Samboi - can you please share your website link?
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!
@rob10k8 - please add following css to the end of your styles.css and check, should look like screenshot below
,accordion li{text-indent: -20px;}
Perfect!
Thank you!!
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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024