Aligning the bulleted listings on the Ride theme

DevonW
Visitor
3 0 0

I am using the Ride theme. However, I don't like the way it looks when I create bulleted lists. When the text is longer than one line, the text is not aligned nicely below each other (see attached screenshot). Can you help me ensure that the text is actually nicely aligned one below the other? I have tried to make some adjustments to the theme's code, but unfortunately without the desired result. So hopefully you guys can help me with this.

Screenshot 1: is a screenshot of how it looks at the moment. So this is how I don't want it to be. I would like to have it automatically correct in every product description already on my website and in every one I am going to create in the future. So not just the ones I sent the link to.
Link: https://batega-oslo.com/products/Solcellelys


Picture 2: is a picture from another website that also uses the ride theme. As you can see here, the bullet points are neatly aligned below each other. This is exactly how I like it too.
Link: https://bodysculptinggym.com/products/strong-first-kettlebell-course?pr_prod_strat=use_description&p...

 

Note: Check out the added store link on the phone because there you can clearly see how the bullet points are nicely aligned below each other.

Replies 4 (4)

DropAHint-Marc
Shopify Partner
23 3 4

Hello,

 

This is Marc from Drop Hint 2.0 Email SMS Postal.

I understand that the Theme Ride doesn't provide an option to change the bullet style. However, fear not, as we can easily achieve this through custom code. Allow me to guide you through the process step-by-step:

 

  1. Go to your Shopify admin dashboard and navigate to "Online Store" > "Themes."
  2. Click on "Actions" and select "Edit code" for the Theme Sense.
  3. DropAHintMarc_0-1690731208631.png

     

    In the "Assets" folder, locate and click on the "base.css" file to access the theme's main stylesheet.

    DropAHintMarc_1-1690731208627.png

     

  4. Scroll to the bottom of the file and add the following code:
 

 

.rte ul, .rte ol {
    padding-left: 0 !important;
}

 

 

Once you've made the desired changes, click on "Save" to apply the modifications.

 

If you encounter any issues or have additional questions, please don't hesitate to ask

 

 

Best regards,
Marc

Please let me know if it works by giving it a Like or marking it as a solution.

Drop Hint 2.0 - Increase revenue and engagement with hints via Email, SMS and Postal. Free plan.

Appsolute website. support[at]appsolute.us

DevonW
Visitor
3 0 0

I've added the piece of code exactly as you explained, but unfortunately without success. The alignment of the bullet points still doesn't line up nicely.

DevonW
Visitor
3 0 0

Hello, I asked a question a while ago. on this I received a solution to me problem. However, unfortunately this solution does not work. I also indicated this in a reply to your message, but I still haven't received a response to this. I would still like to have the problem solved.

felixmpaulus
Shopify Partner
53 0 19

Hi @DevonW,

 

I took a look at your store and you have nice looking bullet points already.

 

Nevertheless I would like to showcase my app.

It enables you to add bullet points to your product page just like you have now, but with loads of extra functionality.

 

There is a free plan available.

We exclusively have 5-star reviews.

 

Have a look here: Bloom: Product Feature Bullets

 

Felix ✌️

Add bullet points to your productpage with Bloom: Product Feature Bullets
Increase branding and conversion. Set your store apart.
❤️ Free Plan available. Exclusively 5-star reviews.