How to Remove left padding/margin from metafield bullets

Store Design
1

How can I remove the space from the left of the bullet made from metafield in the product page? I wanted for it to be align witht he price and variants

metafield.png
metafield.png501Ă—265 7.91 KB

1 Like
2

Hi @LouieG ,

Can I give a try? Would you mind to share your URL website? with password if its protected. Thanks!

3

Select the product section and on the settings scroll down to “Custom CSS”. Set it to 1rem to match all the text padding - if you set it to zero, it may go too far to the left; adjust it accordingly.

ul {
  padding-left: 1rem;
}

JennerDev_0-1689974181685.png
JennerDev_0-1689974181685.png280Ă—245 6.5 KB

1 Like
4

Thank ypu for the information. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.product__info-wrapper.grid__item ul {
    padding-left: 20px;
}

Result:

Ribe_Dagandara_0-1689977533983.png
Ribe_Dagandara_0-1689977533983.png507Ă—433 11 KB

I hope it help.

1 Like
5

Hello, @Made4uo-Ribe , @JennerDev

I tried both, and both worked. Thank you very much, I really appreciate your help, been trying to figure this out for 2 days.

1 Like