Reply To: Icon Alignment Issue

Homepage Community Forums Aspire Theme Support Icon Alignment Issue Reply To: Icon Alignment Issue

#18155
Wes
Moderator

    Oh I see, so you want it to look like this? – http://i.imgur.com/i1OmKjz.png

    If so, then you’d need to add a div that wraps around both the left and right content divs so they are cleared from the other divs.

    To duplicate the example above, I modified your code by adding the class .clear. Then I added that class to the CSS. Here is the html (first step) –

    <h4>Here's why you'll love our Program</h4>
    
    <div class="clear">
    <div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>
    
    <div class="right-content"><h3><b>S</b>uper Practical</h3>
    <p>Learn how native Chinese speaks in their daily conversations.</p></div>
    </div>
    
    <div class="clear">
    <div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>
    
    <div class="right-content"><h3><b>I</b>nstant Fluency</h3>
    <p>Achieve fluency instantly without the need to learn complicated grammar rules.</p></div>
    </div>
    
    <div class="clear">
    <div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>
    
    <div class="right-content"><h3><b>M</b>inimalistic Approach</h3>
    <p>One sentence at a time, our course is designed to prevent procrastination and burnout.</p></div>
    </div>
    
    <div class="clear">
    <div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>
    
    <div class="right-content"><h3><b>P</b>erfect Pronunciation</h3>
    <p>Learn perfect Chinese pronunciation from a Beijing-born Chinese speaker.</p></div>
    </div>
    
    <div class="clear">
    <div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>
    
    <div class="right-content"><h3><b>L</b>aser Focus on Conversation</h3>
    <p>Designed to achieve fluency in the shortest amount of time ever possible by focusing only on conversational Chinese.</p></div>
    </div>
    
    <div class="clear">
    <div class="left-content"><i class="fa fa-check-square-o" style="font-size: 60px;"></i></div>
    
    <div class="right-content"><h3><b>E</b>ngaging Video Lessons</h3>
    <p>Learn Chinese with video lessons makes it simple and fun.</p></div>
    </div>

    And next I added this to the CSS –

    .clear {
        clear: both;
    }

    I also modified the icon’s CSS by removing the padding-top since it would be pushed down too far below the text on the right. You can edit this in your CSS to get the same result –

    .left-content .fa, 
    .right-content .fa {
        padding: 0px 0 40px;
    }

    Let me know if that helps.