Oops... I broke part of the Frontpage

Hello,

I've been changing the module called 'Documentation' which features a document-style icon animate in from the right. Through changing the text, I've accidentally lost some of the formatting that made this work properly, and now the icon sits too close to the text. In the demo, it looks like this:

Original-View.jpg

And now, it looks like this:

Current-View.jpg

Here's the current code of the module:

Code: Select all

<div>
<h3>Online Billing</h3>
<p>In 2014, we launched our online billing system so paying for our work is one less headache.  With your unique username and password, you can see your invoices and pay your bill online in seconds.</p>
<div class="gkCols" data-cols="2">
<div>
<h4>Pay Online</h4>
<p>We accept payment by PayPal online, and can accept BACS (bank transfer), cheque and cash.</p>
</div>
<div>
<h4>Invoice Management</h4>
<p>View and download your invoice history from your online account.</p>
</div>
</div>
</div>
<p><img src="images/demo/style1/documentation.svg" alt="Documentation - image" width="291" height="352" data-fallback="images/demo/style1/documentation.png" data-styles="true" data-scrollreveal="enter right and move 100px over 0.66s" /></p>

Any anybody help me work out what I've done wrong? I think it's something to do with where those DIV markers are placed, but I can't work it out.

Thanks,

- Adam.

Code: Select all

<img src="/gavick.com/j3/mo/images/demo/style1/documentation.svg" data-fallback="images/demo/style1/documentation.png" data-styles="true" alt="Documentation - image" data-scrollreveal="enter right and move 100px over 0.66s" width="291" height="352" />

<div>
<h3>Documentation</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper tellus sit amet nibh fringilla aliquet sit amet in leo. Integer neque urna, tristique eget enim interdum, aliquam tincidunt magna.</p>

<div class="gkCols" data-cols="2">
<div>
<h4>Specification</h4>
<p>Lorem ipsum dolor sit amet, etur adipiscing elit. Nullam semper tellus sit amet nibh fringilla.</p>
</div>

<div>
<h4>Video tutorials</h4>
<p>Nullam semper tellus sit amet nibh fringilla aliquet sit ame risique eget enim interdum.</p>
</div>
</div>

<a href="#" class="button">Read more</a>
</div>   


Still doing it, I'm afraid. I copied and pasted the above code, and carefully replaced my text within the P's, and the large icon still sits above the text. http://www.toastedpenguin.co.uk

Code: Select all

<p><img src="images/demo/style1/documentation.svg" alt="Documentation - image" width="291" height="352" data-fallback="images/demo/style1/documentation.png" data-styles="true" data-scrollreveal="enter right and move 100px over 0.66s" /></p>
<div>
<h3>Online Billing</h3>
<p>In 2014, we launched our online billing system so paying for our work is one less headache. With your unique username and password, you can see your invoices and pay your bill online in seconds.</p>
<div class="gkCols" data-cols="2">
<div>
<h4>Pay Online</h4>
<p>We accept payment by PayPal online, and can accept BACS (bank transfer), cheque and cash</p>
</div>
<div>
<h4>Invoice Management</h4>
<p>View and download your invoice history from your online account.</p>
</div>
</div>
<a class="button" href="#">Existing Customers - Log in</a></div>

Turn off tineMCE in default configuration (change it to Editor - none) - then edit the code.