How to align rich text in the collapsible row in product page

Shopify Discussion
,
1

Hello, I’m trying to make the text in my collapsible row (within the product pages) be all aligned to a certain point. Is there a way of doing that? For reference, I want the text that doesn’t have bullet points to be at the same level as the one within bullet points (roughly on the red line) - so moving it to the right.

URL: jajamoon.com

Thank you,

nahuel_123_0-1737641076548.png
nahuel_123_0-1737641076548.png1156×626 404 KB

nahuel_123_1-1737641111011.png
nahuel_123_1-1737641111011.png1155×629 404 KB

2

Try adding this style:

ul {
    list-style-position: outside !important;
}
3

Hi Nahuel_123

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
.metafield-rich_text_field p {
    padding-left: 20px !important;
}

Result:

LizHoang_0-1737642263648.png
LizHoang_0-1737642263648.png645×588 133 KB

Best,
Esther

1 Like
4

Hello,

You need to add some CSS modifications.

Go to assets/component-accordions.css and find the line where it says:

.accordion__content {
  margin-bottom: 1.5rem;
  word-break: break-word;
  overflow-x: auto;
  padding: 0 .6rem;
}

And below it add the following code:

.accordion__content.rte ul {
  list-style-position: outside;
}

This should fix the problem.