ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Flexform
• August 30, 2013 at 5:13 pm #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.

  September 2, 2013 at 7:41 pm #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

  September 3, 2013 at 2:55 pm #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.

  September 4, 2013 at 1:13 pm #19859
  Melanie – SUPPORT

  Member

  Post count: 11032

  Great 🙂

  January 23, 2014 at 4:34 am #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.

  January 27, 2014 at 11:32 am #44946
  Melanie – SUPPORT

  Member

  Post count: 11032

  Can you show me a page with the problem on?

  January 27, 2014 at 1:38 pm #45040
  tangent24

  Member

  Post count: 23

  This reply has been marked as private.
  January 29, 2014 at 9:16 pm #45648
  tangent24

  Member

  Post count: 23

  Any help??

  January 31, 2014 at 1:26 am #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

• Back to forum

  Posted in: Flexform