Email Distored in Gmail vs Apple mail client

So I have an app that allows for a text for HTML body to be sent to customers. Email looks find in apple mail client but when opening the same email in gmail webbrowser, the email is distorted, like it didn't pick up css. has anyone experience this?

This is the HTML css.

<p>Hi, Lorem ipsum,</p>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem</p>

<p>Cicero famously orated against his political opponent Lucius Sergius Catilina. Occasionally the first Oration against Catiline is taken for type specimens: Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?Sed ut perspiciatis rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi,</p>

<p>Cicero famously orated against his political opponent Lucius Sergius Catilina. Occasionally the first Oration against Catiline is taken for type specimens: Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus nos eludet?Sed ut perspiciatis rem aperiam eaque.</p>

<p>aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui:</p>
<blockquote>
    <p><b>1.</b>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem.<br />
    <b>2.</b> Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem.<br />
    <b>3.</b> Lorem Ipspms&nbsp;<strong>Ipsum Lorem </strong>by completing this assessment will matter. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut! </p>
</blockquote>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem.</p>


<p style="text-align:center;"><a class="btn button--blue" href="%url%" target="_blank">Click Here</a></p>

<blockquote>
    <p>(Note: Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem!<br/>
</blockquote>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam  <a href="https://url.com/v2/url?u=https-3A__forms.kanarys.com_kanarys_form_KanarysTroubleShootingForm_formperma_-5FYb-5Fu1Ao9Cr3zOFD3JrVyOwiPp-5FXGsfRawKjYbpiLqc&amp;d=DwMFaQ&amp;c=lN81rx7osu0xwbZXrPpO-qFGLcgA8g9x83GV6eHvJD8&amp;r=fVwWumQF2dXaJ7QG37WTjwjl18fXCZlB5RMBwx0aemo&amp;m=M1WHlhrkSY08ywUB_O_i6XvbsVg9PXp7xYMeoN-iIWU&amp;s=-FIe0JU5q7u1QjVt73a452PViPoIDCzE00IBcv5SV3w&amp;e=">here</a></p>

<p>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut Quo acque tandem! </p>

<p>Lorem Ipsum,<br />
<br />
Star Ipsum<br />

Co-founder Lorem Ipsum

Email from Gmail web browser

Email from Apple Mail Client

Solution

Gmail will ignore your entire section if there is content inside of it that isn't supported. You look at these Websites and try to find out which css elements are not supported in Gmail. https://www.caniemail.com/clients/ https://caniuse.email/