Bullet Point list not alligning text properly ; is in wrapper

[sawez]

Hey guys, so I’ve added a bullet point list to a section on my homepage, although the text is not lining up properly. Below is an example of how it looks currently. The word ‘bescherming’ should be aligned with the word above it ‘Muggennet’.

If someone knows the code that I should paste into the css can you please share it with me or help me out?

Would be appreciated very much!

My shop product page :

My store : Sawez

Store password : abc

[The_ScriptFlow]

Hey @sawez,

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css paste the following code shared below.

.product__description.rte.quick-add-hidden p {
  padding-left: 0 !important;
  text-indent: -1.8em !important;
  margin-left: 1.4em !important;
}

Results:

[sawez]

Hey, I really appreciate the response, however that description adjusted you showed is a test page with the babycarrier, and that is not what I am looking for to adjust.

What I would like to know is how to do it for the descriptions under the collapsable row ‘Belangrijkste kenmerken’, which all of my other products have. Please see the picture:

[The_ScriptFlow]

@The_ScriptFlow

text-indent: -1.8em

i found that you are using the hand emoji. Instead you need to use the hand icon or likely a SVG.

As the icon now is the text type so it might not possible to achieve with the store url. If you could share the collab code in the p/m then I can take a look and fix this.

[sawez]

Hey thanks a lot for willing to help. I’ll just decrease the length per row text, and keep the emoji. I think this is the easiest solution to this problem.

[The_ScriptFlow]

Instead you need to decrease the width, you must have to increase the width so that it should be inline.

[suyash1]

@sawez

abc

@sawez hello, is your issue solved? I think you have made the changes to the description

[tim_1]

Frankly, to show unordered list <ul> you’d rather output an UL.

I see you’re using “multi-line text” metafield for this content.

I’d rather use a “List” of “single-line text” MF instead.

But you can’t use it this type as a Dynamic source.

However, it’s possible to construct (actually copy/paste from theme source) a custom liquid code to emulate “Collapsible row”, but output data from this MF.

So this code can go into “Custom Liquid” block you may add to your Product Info section:

<div class="product__accordion accordion quick-add-hidden" {{ block.shopify_attributes }}>
  <details>
    <summary>
      <div class="summary__title">
        <h2 class="h4 accordion__title inline-richtext">
          List of single-line values
        </h2>
      </div>
      {{ 'icon-caret.svg' | inline_asset_content }}
    </summary>
    <div class="accordion__content rte custom-list">
      {% # reference your metafield properly %}
      {{ product.metafields.custom.tag_replacement | metafield_tag }}
    </div>
  </details>
</div>

<style>
 .custom-list ul {
   list-style-type: '☛ ';
   list-style-position: outside;
 }
</style>