Skip Navigation

[Resolved] Ordered and Unordered lists issue

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 support ticket is created 7 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

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.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

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

This topic contains 6 replies, has 2 voices.

Last updated by prasadS 7 years, 1 month ago.

Assisted by: Christian Cox.

Author
Posts
#576986
notexpectedlist.png
expectedlist.png

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: hidden link

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

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

#577127

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
Screen Shot 2017-10-11 at 1.11.23 AM.png

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: hidden link

#577741
Screen Shot 2017-10-10 at 3.58.08 PM.png

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
Screen Shot 2017-10-13 at 1.23.53 AM.png

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
Screen Shot 2017-10-12 at 3.58.47 PM.png

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.