Title: Mobile Responsive Emails
Last modified: April 21, 2019

---

# Mobile Responsive Emails

 *  [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/)
 * Hi, I’ve set everything up with ease and the plugin is amazing.
 * Unfortunately the only issue is that the emails on mobile display exactly the
   same as on desktop and don’t resize responsively or anything which makes them
   practically impossible to read.
 * Can you help with this in any way?

Viewing 14 replies - 1 through 14 (of 14 total)

 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11452380)
 * Here is a screenshot by the way:
 * [https://drive.google.com/file/d/1TgKqJlY7wHwTPxaBmVpqg48RPHQ2WO43/view?usp=sharing](https://drive.google.com/file/d/1TgKqJlY7wHwTPxaBmVpqg48RPHQ2WO43/view?usp=sharing)
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11454560)
 * Hey,
    Sorry, I’m not sure I’m following. In your screenshot it looks like the
   email content fits into the screen size. Can you explain the issue in more detail?
   Thanks!
 * Hannah
 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11454606)
 * Hey Hannah,
    Yeah basically I opened the email on my iPhone and it isn’t responsive.
   It just frames the entire desktop layout within the mobile size so everything
   looks super tiny and unreadable.
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11455305)
 * Hey,
    This is how Woocommerce has set up their email templates to function. It’s
   not something this plugin currently edits in the email templates.
 *  One of the main reasons is because of the tables that are added for order information.
   Tables are difficult to make look good for responsive formats and email clients(
   especially outlook) limit your options in terms of what css they will read.
 * I’m currently experimenting with some ways to break out of the normal table output
   for order information so that responsive emails could work. Like moving to a 
   two column table and making the quantity part of the product name section. I 
   hope to have this as an option in an update soon.
 * I know a few users that have added this custom css:
 *     ```
       #template_container, #template_header_image, #template_header, #template_body, #template_footer {
       width:100% !important;
       max-width:600px !important;
       min-width:320px !important;
       }
       #wrapper {
           max-width: 600px !important;
           margin: 0 auto !important;
           padding: 0 !important;
       }
       ```
   
 * That makes it fluid but you need to test since that will scrunch your tables 
   up.
 * I suggest limiting your max width in the settings so that the max width is closer
   to mobile sizes and doesn’t shrink as much.
 * Ben
 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11458435)
 * Thanks a lot Ben, that worked like 90%!
 * The text is now more readable on mobile.
    But the email margin is quite narrow
   in mobile. Here is a screenshot: [https://drive.google.com/open?id=1zJLbXoQ_tsPv39zS8cMzG1e9Mw0H8qzc](https://drive.google.com/open?id=1zJLbXoQ_tsPv39zS8cMzG1e9Mw0H8qzc)
 * Is there a way to stretch it so it fits horizontally when viewing in mobile?
 * I’ve tried playing with the widths in the code you sent me, but it doesn’t seem
   to change anything and I’m not a CSS expert whatsoever.
 * Thanks for your help this far!
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11463898)
 * Try increasing the min width in the css. Like this:
 *     ```
       #template_container, #template_header_image, #template_header, #template_body, #template_footer {
       width:100% !important;
       max-width:600px !important;
       min-width:400px !important;
       }
       #wrapper {
           max-width: 600px !important;
           margin: 0 auto !important;
           padding: 0 !important;
       }
       ```
   
 * Does that help?
 * Hannah
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11464085)
 * Can you tell me what email platform you are viewing it in?
 * Ben
 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11464665)
 * Hey ben,
    I am viewing it in the regular iMail app on my iPhone. Hannah, Ill 
   try your suggestion right away and get back. thank you both!
 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11464689)
 * Hi Hannah,
    So increasing the min-width sort of helped, but it also took a step
   back. It does fill the email and removes some of the blank area on the right,
   but it decreases the text size at the time, making it less readable.
 * To give you a better idea, here is a screenshot of a regular iPhone email aligned
   with two of yours with min-width set to 400px and 500px: [https://drive.google.com/file/d/1TE0fjLC-oE40wlyBBoKNzoVFzMCEsMun/view?usp=sharing](https://drive.google.com/file/d/1TE0fjLC-oE40wlyBBoKNzoVFzMCEsMun/view?usp=sharing)
 * I know they seem readable on PC but keep in mind on a phone these appear much
   much smaller.
 * I appreciate all your help, hope we can figure it out!
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11464694)
 * Based on your images the css doesn’t seem to be applying. set the min width to
   200px.
 * Also what size phone are you using?
 * Finally, I want to again make it clear that I don’t suggest you even do this 
   as it’s not supported by Woocommerce and we don’t have any finalized support 
   for it.
 * Ben
 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11464696)
 * So there is an inverse effect because without CSS, your regular email fills the
   page but it leaves the font way too small to read.
 * Adding your CSS code does make the fonts responsively bigger, but it’s still 
   not big enough to read I would say. Plus it simultaneously creates a lot of white
   space in the screen by not filling it.
 * I’m not a CSS expert, but perhaps an alternative would be to set larger font-
   sizes for screen widths under 800px or something? Would that work? It’s just 
   an idea
 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11464722)
 * Hey Ben, it’s an iPhone 7.
 * Here is a comparison between no code and the code with min-width set to 200px:
   [https://drive.google.com/file/d/1yuKJpEJ8KKeNxpIKnHV25tIrL32iapgh/view?usp=sharing](https://drive.google.com/file/d/1yuKJpEJ8KKeNxpIKnHV25tIrL32iapgh/view?usp=sharing)
 * It helps a little but it is still far smaller than needed to make it readable
   on a phone.
 * By the way I am putting the code inside the custom styles tab of the your editor,
   is that right?
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11464742)
 * > I’m not a CSS expert, but perhaps an alternative would be to set larger font-
   > sizes for screen widths under 800px or something? Would that work?
 * Not really most email providers don’t allow that type of css.
 * It’s more than font size anyway, it’s how the emails are written in terms if 
   fixed width to make the tables zoom out so all the data fixs without overlap,
   to give you the most compatibility.
 * You are welcome to keep dropping the minimum width down and experimenting. Again
   this is not something I suggest you do. Woocommerce core is setting up the emails
   fixed container and it’s done that way to get the most compatibility with the
   table in your email.
 * When I have a tested method that has been tested in more than one email client
   I will be sure to add it as an option in this plugin and let you know.
 * I can’t stress enough that email clients like outlook will do all kinds of crazy
   things with css because they do not function like normal browsers.
 *  Thread Starter [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * (@vmagliulo)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11471369)
 * Thanks Ben, that would be amazing.
    I’ll remove all CSS for now then!

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Mobile Responsive Emails’ is closed to new replies.

 * ![](https://ps.w.org/kadence-woocommerce-email-designer/assets/icon-256x256.png?
   rev=3115863)
 * [Kadence WooCommerce Email Designer](https://wordpress.org/plugins/kadence-woocommerce-email-designer/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/kadence-woocommerce-email-designer/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/)
 * [Active Topics](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/kadence-woocommerce-email-designer/reviews/)

 * 14 replies
 * 3 participants
 * Last reply from: [vmagliulo](https://wordpress.org/support/users/vmagliulo/)
 * Last activity: [7 years, 1 month ago](https://wordpress.org/support/topic/mobile-responsive-emails/#post-11471369)
 * Status: not resolved