Home>Support>How to align text behind bullet points?

How to align text behind bullet points?

Hei.

1) I wonder which CSS could help me to align text behind bullet points
in a bulleted list, so that all text starts aligned even if the text goes over
several lines (see: on mobil devices)

2) How to set a start point for my text (always) behind my bullet points
even if the bullet points technically are parts of the text (I guess).

I’m looking forward to read your answer :)

URL: http://minmassasje/service

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 8 months ago Sebastian

    OK :) I found out that the bulleted list function work!

    Therefore are my questions:

    1) How to change the style of the bullet into this –> •
    instead of a tiny cube?

    2) How is it possible to let the bulleted list starts form
    where the text usually would start? (without a gap)
    see: minmassasje.com/massasje

    3) How to use icons instead of the bullet points without
    missing the bulleted list alignment?
    (the alignment of the text behind the bullet points/icons
    regardless how many lines it will scale down to on small screens)
    see: minmassasje.com/service

    4) How to start a new line within the same bullet point?

  2. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Hi Sebastian

    1. Try the following under Appearance > Custom CSS:

    /* Lists */
    
    .entry-content ul {
    list-style: disc;
    }
    

    2. Sorry, not quite with you there. There is no top margin added to lists so not sure why they would be starting lower. Which list are you referring to?

    3. Try our List (PB) widget. It has a few options you can choose from. If you can’t access that widget, ensure Settings > SiteOrigin Page Builder > Bundled Widgets is activated.

    4. Hold down shift while clicking enter for the new line.

  3. 9 years, 8 months ago Sebastian

    1) This CSS work. But how to make the „disc“ even more BOLD?

    2) Sorry my fault :) I meant the space between the left side of the text box
    and the start point of the list.

    How is it possible to let the list start form the left side without any space in-between?
    (in page builder with visual editor)

    3) I tried the List (PB) widget.

    Fair enough do the icons start from the left side without a gap – nice.

    But I’m totally longing for the visual editor functionality
    (in specific the text type options & horizontal line)
    This could probably be achieved through a good CSS code
    in the widget styles attributes?

    And I would love to use my own icons ..PLUSS there is „just“
    A check icon in various colors available.

    It would be just perfect to build a list with my own icons
    (http://minmassasje.com/service) within visual editor
    (that starts form the left side without any gap! as now.)
    But with the following text behaving like a bullet list text

    4) This is works fine now.

    Thanks for your support and knowledge!

  4. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    1 & 2. Try this instead:

    /* Lists */
    
    .entry-content ul {
    list-style: circle;
    margin-left: 0;
    }
    

    3. The functionality of the Visual Editor widget (are you using this widget?) is the best we can offer right now. Custom list images can be done with CSS. See:

    http://css-tricks.com/almanac/properties/l/list-style/
    or
    http://www.w3schools.com/cssref/pr_list-style-image.asp

    4. Super, glad that helps.

  5. 9 years, 8 months ago Sebastian

    Thanks for your help Andrew!

    1) & 2) er solved!

    3) here I need to invest some more time to solve my challenge :P
    Thanks for the info-sites!

    Have a nice day.

  6. 9 years, 8 months ago Andrew Misplon
    Hi, I Work Here

    Glad to hear some progress was made. All the best with your project.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More