Search code examples
iosoutlookhtml-emailresponsivepardot

Email displaying small, like a desktop version, only in ios mail

I can't figure out why our emails are displaying like a miniaturized desktop verison in ios mail clients. In ios Outlook and Gmail it seems fine. We are using Salesforce Pardot.

enter image description here

Here's the styling I inherited

<style type="text/css">
        /*GENERAL STYLES*/
        body {font-family: Arial, sans-serif; font-weight: 400; text-align: center; padding: 0; margin: 0; border: 0;}
        p, ul, ol {margin: 0;}

        /*EMAIL STYLES*/
        .eyebrow {font-size: 12px; line-height: 16px; color: #425563;}
        .webversion {font-size: 12px; line-height: 16px; color: #425563;}
        .webversion > a {color: #425563 !important; text-decoration: none !important;}
        .webversion > a > span {color: #425563 !important; border-bottom: 1px solid #425563;}

        /*IMAGERY STYLES*/
        .picture, .picture-p {display: block !important;}
        .social_icon {width: 28px;}
        .cclogo {display: block; width: 200px;}
        .ccline {display: block; width: 300px;}
        
        /* TITLE STYLES */
        .title-big {font-size: 28px; color: #0073FF; text-transform: uppercase;}
        .title-big > a {color: #0073FF; text-decoration: none !important;}
        .title-big > a > span {color: #0073FF;}
        .title-small {font-size: 18px; color: #425563;}
        .title-small > a {color: #425563; text-decoration: none !important;}
        .title-small > a > span {color: #425563; border-bottom: 1px solid #425563;}
        .title-big-r {font-size: 28px; color: #FFF; text-transform: uppercase;}
        .title-big-r > a {color: #FFFFFF; text-decoration: none !important;}
        .title-big-r > a > span {color: #FFFFFF;}
        .title-small-r {font-size: 18px; color: #FFFFFF;}
        .title-small-r > a {color: #FFFFFF; text-decoration: none !important;}
        .title-small-r > a > span {color: #FFFFFF; border-bottom: 1px solid #FFFFFF;}

        /*BODY STYLES*/
        .text-regular, ul {font-size: 14px; line-height: 22px; text-align: left;}
        .text-regular > a {font-weight: 600; color: #425563; text-decoration: none !important;}
        .text-regular > a > span {font-weight: 600; color: #425563; border-bottom: 1px solid #425563;}
        .text-regular-r {font-size: 14px; line-height: 22px; color: #FFF; text-align: left;}
        .text-regular-r > a {font-weight: 600; color: #FFFFFF; text-decoration: none !important;}
        .text-regular-r > a > span {font-weight: 600; color: #FFFFFF; border-bottom: 1px solid #FFFFFF;}
        .text-small {font-size: 12px; line-height: 16px; color: #425563;}
        .text-small > a {color: #425563; text-decoration: none !important;}
        .text-small > a > span {font-weight: 600; color: #425563; border-bottom: 1px solid #425563;}    
        .text-regular > img, .text-regular-r > img, .text-small > img {width: 12px;}

        /* RESPONSIVE STYLES */
        .mobile-only {display: none;}

        @media screen and (max-width: 768px) {
            .mobile-only {display: block !important;}
            .mobile-hide {display: none !important;}
            .rspnsv, .rspnsv > tr {display: block !important; width: 100% !important;}
            p {width: 95% !important; padding: 0 2.5% !important;}
            .picture {display: block !important; width: 100% !important; height: unset !important;}
            .picture-r {display: block !important; width: 95% !important; height: unset !important; padding: 0 2.5% !important;}
            .contact_icon, .button {padding-left: 2.5%;}
        }
    </style>

I've tried a few tricks like adding styling for smaller breakpoints to increase font size to no avail. Why is it displaying like this only in ios Mail?

Solution

  • Typically this is because of an oversized element, and so the email client shrinks everything down to fit it all in.

    The usual culprit is an image - make sure it's responsive, i.e. you might add style="max-width:100%;height:auto;" to it.