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
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.
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
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
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!
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
Can you tell me what email platform you are viewing it in?
Ben
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!
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
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!
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
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
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
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?
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.
Thanks Ben, that would be amazing.
I’ll remove all CSS for now then!
