Homepage › Community Forums › Aspire Theme Support › Icon Alignment Issue › Reply To: Icon Alignment Issue
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.
