Bullet point text alignment

Hi, new to this forum,

I’m trying to style up the bullet point on a site that is built in wordpress, at the moment on each bullet point the text is indented but if the sentence/line is to long the second line is not indented and aligns with the bullet point. Hope that makes sense :slight_smile:
Css:

li {
    margin: 0 0 .5em 0;
    padding: 0;
}

How do amend or what do I add to make the text align?

thanks

Colin

Hi there colin45,

and a warm welcome to these forums. :winky:

A link to the site in question would most
probably help members to help you. :sunglasses:

coothead

Hi Coothead,

Yes that would help sorry. http://dev.londonhr.org, click membership :slight_smile:

Cheers

Colin

Maybe update the CSS to remove the list-style-position rule, and thent add some left padding to make it line up.

ol, ul {
    padding-left: 20px;
    /*list-style-position: inside;*/
}
2 Likes

Hi there colin45,

you will find the code that @RyanReese is
referring to on line #935 of the vc.css file.

coothead

Thanks coothead, I’ve tried sticking the code in the custom css area but it didn’t work, any ideas?

Much appreciated

Colin

Hi there colin45,

I’ve tried sticking the code in the custom css area…

I am not sure what you mean by custom css area. :unhappy:

You need to edit the code at line #935 of the vc.css file. :winky:

coothead

Does your theme allow to add custom CSS? Since it’s wordpress, if you don’t have a child theme, you probably shouldn’t modify vc.css like suggested.

1 Like

Hi colin45,

Your site seems to load all css files in sequence, and second last (before the media.css) a child css is loaded:

/wp-content/themes/healthcoach-child/style.css?ver=1.3

It seems to be a ready made template child theme that is meant to customize the parent theme if you like. That means you could put the custom css in there to follow @RyanReese advice to put the custom css in a child theme. :slight_smile:

The child theme file is currently empty, only the mandatory child theme details is in place:

/*
 Theme Name: HealthCoach Child
 Theme URI: https://stylemixthemes.com/
 Description: Health Coach Child Theme
 Author: Stylemix Themes
 Author URI: https://stylemixthemes.com/
 Template: healthcoach
 Version: 1.3
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain: healthcoach-child
*/

And, because the dhild theme is loaded after the parent theme, it will override same selectors in the parent theme. Try put the css @RyanReese suggested in there after the comment block:

/*
Theme Name: HealthCoach Child
Theme URI: https://stylemixthemes.com/
Description: Health Coach Child Theme
Author: Stylemix Themes
Author URI: https://stylemixthemes.com/
Template: healthcoach
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: healthcoach-child
*/

/*** rules to override previous loaded styles for the same selectors ***/

/* override the vc.css "Text Column" for lists ruleblock declaration: line-height:32px */
.wpb_text_column ol li,
.wpb_text_column ul li {
   line-height: 1.3;
}

/* then add a new, more specific ruleblock, that only targets lists in text columns to 
override the generic "List" ruleblock declarations: padding-left:0; list-style-position:inside; */
.wpb_text_column ol,
.wpb_text_column ul {
   padding-left: 20px;
   list-style-position: outside;
}

I suggest you keep the line Version: 1.3 as it is, I’m not sure how an eventual theme update handles an edited child theme file. If a new empty file is created with a higher version number, I suggest you just copy the custom css to the new child theme file.

Keep us posted. :wink:

Thanks Guys for all your help worked perfectly in the child theme css :slight_smile:

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.