Bullet point text alignment


#1

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


#2

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


#3

Hi Coothead,

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

Cheers

Colin


#4

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;*/
}

#5

Hi there colin45,

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

coothead


#6

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

Much appreciated

Colin


#7

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


#8

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.


#9

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:


#10

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