[NaturalifeParticipant]

Hello,

I cannot seem to successfully change the spacing between numbered and bulleted list elements. In other words, I want to increase the spacing between 1 and 2.

1. This

2. And This

I have tried custom css as suggested in archived posts but I had no luck.

My website is naturalife.org

The list am trying to modify is a draft post on blepharitis.

Thanks!

[NaturalifeParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

ol li {
    line-height: 1.2;
}

You can add a class to the <ol> tag to make the code specific.

Hope it helps, Cheers!

[NaturalifeParticipant]

Unfortunately, the spacing between each bullet point or list number seems to be unaffected after added that code and even increasing the spacing to see if it made a difference. Any other suggestions?

Note: I don’t want to increase the line spacing in a single bullet or number. In other words, I don’t want to increase the spacing between the lines in a single bullet point or list number. I want to increase the spacing after the text in each bullet point or list element.

Thanks for the help!

[ThaiModerator]

Hi There,

Could you please double check on your admin account?

I was unable to login.

Thank you.

[NaturalifeParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Yes, I can confirmed that I can login with that credentials thanks. Please add a class to your ordered list

e.g.

<ol class="myorderlist">
<li></li>
<li></li>
<li></li>
</ol>

And then you can add this under Custom > CSS in the Customizer.

ol.myorderlist li {
    margin-bottom: 35px;
}

Hope it helps, Cheers!

[NaturalifeParticipant]

I tried putting this as raw html and I have tried to add the class in a visual composer content box. Neither seemed to work.

Any suggestions?

[RadModerator]

Hi there,

Another support here, I’m confused, where should I able to find the list you’re currently working on? I can’t find blepharitis.

To confirm your request, it’s the spacing between the bullet and the first letter of a text.

Eg.

1.[SPACE HERE]TEXT HERE
2.[SPACE HERE]TEXT HERE

Right?

You can try this CSS.

ol li {
padding-left: 10px;
}

Thanks!

[NaturalifeParticipant]

Sorry if I was unclear.

No, I was referring to this spacing:

1. Text Here
[SPACE HERE]

2. Text Here

The Blepharitis draft is now live so you should be able to find it there. It’s the most recent post.

Thanks for the help.

[RadModerator]

Hi there,

Thanks for clarification.

It should be this,

ol li {
padding-bottom: 35px !important;
}

But, any of the above CSS will not work due to your invalid @media blocks. You should maintain the opening and closing bracket when using a @media block.

@media ( max-width: XXXXpx ) { /* MEDIA OPENING */

          .selector1 { /* CSS OPENING */

          } /* CSS CLOSING */

          .selector2 { /* CSS OPENING */

          } /* CSS CLOSING */

} /* MEDIA CLOSING */

You’ll notice that most of your media block has no closing bracket. Like this,

@media (max-width: 480px){
    blockquote.x-blockquote {
        font-size: 16px !important;
    }

blockquote.x-blockquote {
    background-color: #FFFFFF;
    border: 1px solid #272727;
    border-left: 0;
    border-right: 0;
}
.x-code {
    background-color: #fff;
}

ol.myorderlist li {
    margin-bottom: 35px;
}

Since there is no closing bracket, all CSS under it will fall under 480px, hence, you won’t able to see your changes when viewed on desktop. Or won’t work at all.

Should be like this,

@media (max-width: 480px){
    blockquote.x-blockquote {
        font-size: 16px !important;
    }

blockquote.x-blockquote {
    background-color: #FFFFFF;
    border: 1px solid #272727;
    border-left: 0;
    border-right: 0;
}
.x-code {
    background-color: #fff;
}

} /* MISSING CLOSING BRACKET */

ol.myorderlist li {
    margin-bottom: 35px;
}

This too has no closing brackets,

@media (max-width:  767px) {
    body
.blog, .single, h2{
    font-size: 1.35em;}

}
@media (max-width:  767px) {
    body
.blog .entry-title a,  .single .entry-title {
    font-size: 1.6em;}
}
.touchevents a.x-scroll-top {display: none;}

.page-id-506 .x-breadcrumb-wrap {
display: none; 
}
/*
// Buttons.
*/

Thanks!

[NaturalifeParticipant]

Thank you, that helped!

How would I apply this change to bullet lists?

[NicoModerator]

Hi There,

You can also enclose the bullet list class in the @media queries.

For example:

@media ( max-width: XXXXpx ) { /* MEDIA OPENING */

          ol li{ /* CSS OPENING */

          } /* CSS CLOSING */

          .bulletclass { /* CSS OPENING */

          } /* CSS CLOSING */

} /* MEDIA CLOSING */

Hope it helps.

Let us know how it goes.

Thanks.

[NaturalifeParticipant]

I am still familiarizing myself with css so bear with me.

It appears that the previous suggestion had me add the media closing before the “ol li” list formatting.

This is what I have:

@media (max-width: 480px){
    blockquote.x-blockquote {
        font-size: 16px !important;
    }

blockquote.x-blockquote {
    background-color: #FFFFFF;
    border: 1px solid #272727;
    border-left: 0;
    border-right: 0;
}
.x-code {
    background-color: #fff;
  }
}
ol li {
padding-bottom: 30px !important;
}

That worked for my list formatting but where would I add the bullet formatting as suggested? Also, is .bulletclass just a class so I would have to put that in my content builder blocks with a bulleted list?

Thank you very much for your help so far!

[Rue NelModerator]

Hello There,

You can update your code like this:

@media (max-width: 480px){
    blockquote.x-blockquote {
        font-size: 16px !important;
    }

  blockquote.x-blockquote {
    background-color: #FFFFFF;
    border: 1px solid #272727;
    border-left: 0;
    border-right: 0;
  }

  .x-code {
    background-color: #fff;
  }

  ol li {
    padding-bottom: 30px !important;
  }

  .bulletclass { /* CSS OPENING */
    /* styling here */
  } /* CSS CLOSING */
}

And yes, you need to add the bullet class in your content builder. If you have added a list in a text element block, you can have it like this:

<ol class="bulletclass">
  <li>My list item </li>
  <li>My list item </li>
  <li>My list item </li>
  <li>My list item </li>
  <li>My list item </li>
</ol>

Hope this helps.

[Author]

Posts