New Landing How can we help? Themeforest Theme Support Flexform Indent text when bulleted/list items wrap to next line

Viewing 9 posts - 1 through 9 (of 9 total)
  • Posted in: Flexform
  • #19191
    Hamilton
    Member
    Post count: 28

    Something else I notice which would be nice to fix as a typography aesthetic is the way list lines of text appear when the phrase is to long and requires a line break. Is there a way to control the new line to indent inwards the amount of the bulleted icon?

    Can be seen here if you view on a smaller screen or squeeze you browser window in to see what I’m talking about.

    http://playlandcom.com/services

    Thanks.

    #19494
    Melanie – SUPPORT
    Member
    Post count: 11032

    Hi,
    since those are not list elements but icons with text following it will be hard to control the line break indent. Can you try setting that up as a list? I’ll try to give you custom css for that then.

    Cheers

    #19565
    Ratiocinator
    Member
    Post count: 22

    Hi Hamilton,

    You can do this in CSS but will need to tweak your setup just a little. Right now you have it as:

    <p class="bigBody">
    <i class="icon-ok sf-icon sf-icon-float- icon-small"></i>
    Bullet point text
    <br>
    <i class="icon-ok sf-icon sf-icon-float- icon-small"></i>
    Bullet point text
    <br>
    <i class="icon-ok sf-icon sf-icon-float- icon-small"></i>
    Bullet point text
    </p>
    

    There are different ways to go about doing this, but to keep it simple, simply wrap the entire pseudo bullet list in one paragraph tag, remove the break tags, and instead separate them with spans. So now it would look like:

    
    <p class="bigBody">
    <span>
    <i class="icon-ok sf-icon sf-icon-float- icon-small"></i>
    Bullet point text
    </span>
    <span>
    <i class="icon-ok sf-icon sf-icon-float- icon-small"></i>
    Bullet point text
    </span>
    <span>
    <i class="icon-ok sf-icon sf-icon-float- icon-small"></i>
    Bullet point text
    </span>
    </p>
    

    Then, in your ACP, go to “General Options” under “Theme Options.”

    Inside the “Custom CSS” field enter:

    .bigBody span {
    display: table;
    }
    .bigBody i {
    display: table-cell;
    }
    

    ^ That last bit of CSS will keep the text from breaking down underneath the checkmark and instead keep it to the side of the checkmark.

    #19859
    Melanie – SUPPORT
    Member
    Post count: 11032

    Great 🙂

    #44222
    tangent24
    Member
    Post count: 23

    I am having a similar problem, except with the basic WordPress bullets (vs. Flexform bullets). Is there any basic css that I can add to the child theme that will force the first character on the second line of a bulleted list (or numbered list) to be aligned with the first character on the first line?

    Thank you.

    #44946
    Melanie – SUPPORT
    Member
    Post count: 11032

    Can you show me a page with the problem on?

    #45040
    tangent24
    Member
    Post count: 23
    This reply has been marked as private.
    #45648
    tangent24
    Member
    Post count: 23

    Any help??

    #45928
    Swift Ideas – Ed
    Keymaster
    Post count: 15264

    Hi there,

    Please add the following custom css to the box within theme options, it should sort the issue for you:

    .wpb_text_column ul, .box-content-wrap ul {
    padding-left: 1em;
    text-indent: -1em;
    }

    That is because they are in two separate columns, so spacing is added on mobile for consistency. In your case, to remove the space use the following custom css:

    .home .span6.wpb_text_column .one_half, .home .span6.wpb_text_column .one_half > ul {
    margin-bottom:0;
    }

    Hope that helps!

    – Ed

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register