Centering Bullet Points in a Column

Homepage Community Forums Epik Theme Support Centering Bullet Points in a Column

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16850
    krosebraugh
    Customer

      Is there a way to center bullet points under a heading in a Genesis column class?

      #16851
      Andykev
      Customer

        You can set the columns (two, three, four…) by changing that part.

        Put the Bullet Points inside each column (class).

        In a responsive view (small screen) the text will change, so be aware design wise how many columns you add on a page, and what the contents are inside the column.

        <div style="width: 100%; left-margin: auto; right-margin: auto;">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
        </div>
        
        <div class="one-third first"><div style="width: 100%; left-margin: auto; right-margin: auto;">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
        </div></div>
        
        <div class="one-third"><div style="width: 100%; left-margin: auto; right-margin: auto;">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
        </div></div>
        
        <div class="one-third"><div style="width: 100%; left-margin: auto; right-margin: auto;">
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
            </ul>
        </div></div>
        

        The first bullet point is outside the columns, then there are the three columns.

        #16852
        krosebraugh
        Customer

          Thank you Andykev!

          #16853
          Andykev
          Customer
            <div class="one-third first"><div style="width: 100%; left-margin: auto; right-margin: auto;">
            <h3><p style="color:blue">Column One</H3></p style="color:blue">
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                </ul>
            </div></div>
            
            <div class="one-third"><div style="width: 100%; left-margin: auto; right-margin: auto;">
            <h3><p style="color:red">Column Two</H3></p style="color:red">
                    <li>List item 1</li>
                    <li>List item 2</li>
                </ul>
            </div></div>
            
            <div class="one-third"><div style="width: 100%; left-margin: auto; right-margin: auto;">
            <h3><em><p style="color:green">Column Three</H3></em></p style="color:green">
                <ul>
                    <li>List item 1</li>
                    <li>List item 2</li>
                </ul>
            </div></div>
            

            I removed the <center> and the column heading looks better. You can see adding the size <H3> or color attribute lets you be creative in customizing. Like highlighting certain categories, products, scores, etc.

            Enjoy! Merry Christmas.

          Viewing 4 posts - 1 through 4 (of 4 total)
          • The topic ‘Centering Bullet Points in a Column’ is closed to new replies.