Indent all post and page lists w/o affecting header & sidebar

[jaimemintun]

Hi, I want to add margin-left and padding-left to all my unordered and ordered lists in any body/page/post content.

When I use this css it works perfectly on my lists:
ul, li {
margin-left: 5%;
padding-left: 2%;
}

However then it affects the menu items in my navigation menu and likely will affect other elements that use ul or li (such as the sidebar).

How can I add css to my global css settings that will give me the indent on all lists in my content without affecting any other areas?

I’ve tried adding body or .single-post, .page .entry-content before the ul, li and still nothing works. I feel I’m just slightly getting synax wrong somewhere?

Thanks for your help as always!
Jaime

[mldarshana]

Hi There,

Thanks for writing in! You can assign a unique class to your <ul class="myCustomUl"> and then target them as follows.

.myCustomUl li {
 // your css here
}

Hope that helps.

[jaimemintun]

I’m trying to get out of having to remember to assign a class to each bullet list I make as I make them a lot using the visual editor in Pro.

Is there a way to make it global for all ul li lists ONLY in content areas or to exclude the sidebar and menu/footer navs?

[ruenel]

Hey There,

To resolve your issue, you may use this code:

.entry-content ul, 
.entry-content li {
  margin-left: 5%;
  padding-left: 2%;
}

this code will only affect those list that were added in the entry content area.

Please let us know how it goes.

[jaimemintun]

Great thank you!

[rad]

You’re most welcome!