New Landing › How can we help? › Cardinal › Bulleted list alignment

Viewing 15 posts - 1 through 15 (of 31 total)
1 2 3
  • Back to forum
    Posted in: Cardinal
  • August 7, 2014 at 9:11 pm #99134
    QuenchStudio
    Member
    Post count: 73

    I’m using bulleted (and icon) lists throughout the site I’m doing and they aren’t lining up nicely once the text goes more than one line. The second line/s don’t indent to align with the first. The numbered list work fine, but not bulleted. Is there a way to fix this?

    You can see an example here: http://www.prsaboston.net/prsa-preview/professional-development/apr-accreditation/

    August 7, 2014 at 9:24 pm #99139
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Try adding this to your custom css:

    .sf-list {
padding-left: 1.3em;
text-indent: -0.7em;
}

    – Kyle

    August 7, 2014 at 9:29 pm #99140
    QuenchStudio
    Member
    Post count: 73

    Kyle – it kind of worked for the Star icon list I have on that page, but didn’t work at all for a regular bulleted list.

    August 7, 2014 at 9:31 pm #99143
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Try this instead:

    .spb-asset-content ul li {
  text-indent: -0.9em;
  padding-left: 1.3em;
}

    – Kyle

    August 8, 2014 at 2:53 am #99205
    QuenchStudio
    Member
    Post count: 73

    OK – that aligned the regular bullets, but not the icon ones. Plus, I am using the Star on this page, would spacing need to be adjusted for any icon? Sorry to be a pain.

    -Kendall

    August 8, 2014 at 5:24 am #99230
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Please use this custom css code-:

    .spb-asset-content ul li {
padding-left: 1.3em;  
text-indent: -0.9em;
}

.spb-asset-content ul.sf-list li {
padding-left: 1.3em !important;
text-indent: -0.7em !important;
}

    Thanks 🙂
    With Best Regards
    Mohammad

    August 8, 2014 at 12:21 pm #99379
    QuenchStudio
    Member
    Post count: 73

    The sf-list one didn’t work but I used this:
    .spb-asset-content ul.sf-list li {
    padding-left: 1.6em !important;
    text-indent: -1.6em !important;
    }
    and it worked great.

    Thanks,
    Kendall

    August 8, 2014 at 12:30 pm #99384
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    You most welcome. I’m glad that issue resolved.
    Thanks 🙂
    With Best Regards
    Mohammad

    August 12, 2014 at 1:46 pm #100307
    QuenchStudio
    Member
    Post count: 73

    OK – new issue has arisen in regards to the ul il functions. The icons and bullets lists are fixed using the above code snippets. Then gravity forms had an issue and another code snippets was required to make it work. Problem now, is the blog page uses the same “.spb-asset-content ul li” style and everything is out of alignment. What can the fix be? Will share link in a private message next.

    Thanks,
    Kendall

    August 12, 2014 at 1:47 pm #100308
    QuenchStudio
    Member
    Post count: 73
    This reply has been marked as private.
    August 12, 2014 at 2:02 pm #100321
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Please only use this css:

    .spb-asset-content ul.sf-list li {
padding-left: 1.3em !important;
text-indent: -0.7em !important;
}

    and remove

    .spb-asset-content ul li {
padding-left: 1.3em;  
text-indent: -0.9em;
}

    – Kyle

    August 12, 2014 at 2:13 pm #100327
    QuenchStudio
    Member
    Post count: 73

    Yes, that fixes the blog page alignment – but messes up the icon and regular bulleted lists = ugh
    http://www.prsaboston.net/prsa-preview/professional-development/apr-accreditation/

    I could get the icon list to align by using 1.6em and -1.6 em in the code above. But that doesn’t take care of the regular bullets.

    Thanks,
    Kendall

    August 12, 2014 at 2:20 pm #100332
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    If you wanted to apply to normal bullets, you would need to add an extra class on them, and then use 

    ul.yourclass li {
padding-left: 1.3em;  
text-indent: -0.9em;
}

    – Kyle

    August 12, 2014 at 2:55 pm #100370
    QuenchStudio
    Member
    Post count: 73

    Good idea, but it didn’t work – the bullets wouldn’t recognize the extra class name and were still out of alignment.

    August 12, 2014 at 2:56 pm #100376
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Likely a human error with the setup, can you provide the link with a normal list so I can check?

    – Kyle

  • Back to forum
    Posted in: Cardinal
Viewing 15 posts - 1 through 15 (of 31 total)
1 2 3

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