[Resolved] Ordered and Unordered lists issue

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Our next available supporter will answer your ticket in about 2.57 hours from now. Thank you for your understanding.

You are not logged in. You can view support threads, but not post.
If you are already logged in, please refresh your browser.

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to add margins to the ordered and unordered list items shown on my site.

Solution: Add some custom CSS:

.product-left-row-one li, .product-policies li {
  margin-left: 22px;    
}

This topic contains 6 replies, has 2 voices, and was last updated by  prasadS 1 week ago. The support staff assigned to this topic is Christian Cox.

Viewing 7 posts - 1 through 7 (of 7 total)
Author
Posts
#576986

When I add an ordered list or unordered list on the website, the bullet points and numbers do not follow the padding applied. I disabled all plugins and then activated the plugins one by one. This issue occurs when the WooCommerce Views Plugin is activated.

I am trying to: Display text in list format - Ordered list and unordered list

Link to a page where the issue can be seen: https://in.leisurekart.com/experience/bungee-jumping-in-rishikesh/

I expected to see: Please see attached screenshot expectedlist.png

Instead, I got: Please check attached screenshot notexpectedlist.png and the link above.

#577127

Christian Cox
Forum moderator

Supporter languages: English (English )

Supporter Timezone: America/New_York (GMT-04:00)

Hi,
Usually this happens when the CSS applied in Layouts CSS and JS conflicts with the original styles somehow. We can try to override that by adding the following code to Layouts CSS:

.product-left-row-one li {
  margin-left: 22px;    
}
#577735

Hi Christian,

The css code worked perfect for the content inside the body, but for content inside fields created by types, the bullet points are still looking same as before.

Please check this link and the attached screenshot: https://in.leisurekart.com/experience/sailing-at-gateway-of-india-mumbai-macgregor-26-yacht/

#577741

Christian Cox
Forum moderator

Supporter languages: English (English )

Supporter Timezone: America/New_York (GMT-04:00)

Okay great. If another section needs to be included, you need to modify the CSS code to target that section. Please see the attached screenshot. This section is a div with class "product-policies" instead of "product-left-row-one". So you must add that selector to the CSS:

.product-left-row-one li, .product-policies li {
  margin-left: 22px;    
}
#578351

Hi Christian,

On mobile devices, there is no margin. Please see the screenshot. If possible, can you please help me with the css code to add margin for mobile devices as well.

#578353

Christian Cox
Forum moderator

Supporter languages: English (English )

Supporter Timezone: America/New_York (GMT-04:00)

It appears that the code I provided has been placed in a media query limiting its effectiveness to displays greater than 850px wide. Please see the attached screenshot. Can you tell me why this media query was added? Can it be removed?

#578639

Hi Christian,

I had placed the code inside the media query by mistake. I have placed it in the correct place now and it works fine! Thanks a lot for the help.

Viewing 7 posts - 1 through 7 (of 7 total)

You are not logged in. You can view support threads, but not post.
If you are already logged in, please refresh your browser.