Why isn’t the email responsive?

  • Resolved eripanci

    (@eripanci)


    3 years, 2 months ago

    Hello!

    I see that the e-mail is not responsive. This is how it looks on Gmail app on iPhone: https://ibb.co/wYsWTBF

    Also, I can’t seem to add custom fonts. I’ve tried with <link> and @font-face, but there doesn’t seem to be a difference. Maybe you can consider adding some documentation about this.

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter eripanci

    (@eripanci)

    It seems that if I disable the “Use WooCommerce Template Style” option, the e-mails are responsive, but of course, our WC e-mail template header/footer is missing. Is this normal behavior? The behavior that the e-mail is not responsive if it uses the WC Template Style.

    Still, on the other hand, I can’t get my CSS styles to work.

    Plugin Support priyankajagtap

    (@priyankajagtap)

    Hi @eripanci,

    Sorry for the inconvenience.

    Ideally, responsiveness should not be an issue for this setting “Use WooCommerce Template Style”. When this setting is enabled, we simply add the WooCommerce email header & footer.

    We have checked this behavior at our end by sending a test email to my colleague who is having an iPhone. We noticed that the test email is displaying properly on the Gmail app on an iPhone.
    See these screenshots: https://www.screencast.com/t/iWiEfmo0lzf4
    2022-01-06_15-25-54

    We have tested this on the device iPhone 11. Can you please let us know which series of these phones you are using?

    The CSS style in our template code is editable. You can use font-family property and use the custom fonts as per your requirement. For e.g. font-family: Arial, Helvetica, sans-serif;
    You can replace the custom font with Arial/Helvetica/sans-serif

    Thread Starter eripanci

    (@eripanci)

    Hi, thanks for the response!

    My device is iPhone Xs Max. I can send you a test e-mail if you provide me with an e-mail.

    As for CSS, I can edit it inline, but the CSS inside <style> tags with classes don’t seem to work, therefore I couldn’t write responsive styles.

    Also regarding the fonts, I mean to add my own custom fonts that we use on the website. Is this possible? Because as far as I’ve tried, the custom fonts weren’t added (maybe it’s the same issue with CSS that is written inside <style> tags)

    Thread Starter eripanci

    (@eripanci)

    Kindly reminder!

    Plugin Support priyankajagtap

    (@priyankajagtap)

    Hi @eripanci,

    Sorry for the delay in response. While we’re seeing that the email is responsive at our end, I’m including some HTML changes to be added to the email. Can you please try to add those and check once?

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style rel="stylesheet" type="text/css">
.... add all  css here....
    </head>
    <body>
...... email body....
    </body>
</html>

    As you can see in the block above, We’ve added some <meta> in the <head> in the email HTML. Please move all the CSS in the <style> inside the email <head>

    This will ensure that CSS related to responsiveness & the font family not being applied correctly should be fixed. We have tried to apply different font families such as Georgia, Verdana etc. and they are being reflected correctly in the Gmail app.

    One thing to note here is once you add these HTML changes, please use the email editor in text mode itself to ensure that the changes are not removed.

    Request you to kindly check once with these changes at your end. You can try to send a test email to priyanka at tychesoftwares dot com for us to see the changes as well.
    If things still don’t work out, please send us an email on
    support at tychesoftwares dot freshdesk dot com

    Regards,
    Priyanka

    Thread Starter eripanci

    (@eripanci)

    Hi there!

    I’ve contacted you by e-mail.

    Plugin Support priyankajagtap

    (@priyankajagtap)

    Hi @eripanci,

    Yes, I see that you have created a ticket on our ticketing system. We will check it soon today and get back to you on the same.

    Regards,
    Priyanka

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Why isn’t the email responsive?’ is closed to new replies.