Bullet Points Spacing Issue

  • So I got this problem in wordpress’ post editor, where everything appears fine in the visual blocks and then on the live page my paragraph under the bullet point paragraph fails to have spacing and takes the attributes of the bullet point paragraph, thus, losing the spacing and hugging the bullet point paragraph close.

    The solution was to add manual paragraph blocks between the bullet point paragraph and the other normal paragraph below.

    Image: https://i.imgur.com/KHcfeks.jpg

    Is this fixable? The manual solution works, but it’s annoying, while adding custom css to each post would be ridiculous.

    • This topic was modified 5 years, 3 months ago by markovaser.
Viewing 4 replies - 1 through 4 (of 4 total)

  • The problem is your theme CSS is not consistent in the editor and front end.
    You can add a bottom margin to ul, but then nested lists will look odd, so you have to add it carefully, targeting the outermost ul only. It is tricky because ul is used in menus and widgets and comments, which the editor doesn’t have to worry about, but the theme does.
    So ask in your theme’s support forum for help with the fix, and it will benefit all the users of that theme.

    If you post a link to an affected page, it would be easier to give a more specific information, but in general, you can use CSS to target the first child UL inside the content portion of your posts without having it affect objects like widgets or menus. Depending upon the theme, most themes will assign a class called hentry to the article content, so you can write a rule like this:

    
.hentry > ul {
   margin-bottom: 1rem;
}

    Which will add one line of space to the bottom of each unordered list in the post or page content. The greater than sign > in the selector means to only affect the immediate children, so it shouldn’t affect nested lists. And if you add it to your custom CSS (Appearance → Customize → Additional CSS), you only need to add it once for the whole site, not for each individual post.

    Thread Starter markovaser

    (@markovaser)

    I am using Elementor Hello theme with the Elementor Pro plugin. I cannot provide a link to the affected page, since I’m developing it offline.

    The code provided did not fix the issue, while the only solution was that which I showed in the picture, by adding a paragraph between the last ul and the next <p> paragraph. If I were to constantly add a code on each post, that’d be a nightmare. Also, adding this code to ul list that isn’t faulty, it’d make problems for them as well. As Joy said, I’d have to specifically target the faulty ul and fix it.

    Thread Starter markovaser

    (@markovaser)

    The problem is the Elementor Hello theme, as I changed to the classic wordpress Twenty Seventeen theme, and the formatting problem was gone. I’ve contancted Elementor support for this problem and hopefully there’s a fix soon.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Bullet Points Spacing Issue’ is closed to new replies.