Framework: Laravel 5.5 Notifications are not mobile responsive?
Using the default theme and style that come out of the box, I've noticed the html notification templates are not mobile responsive - the media queries don't make any difference when the email is viewed in different viewports.
In addition the use of word-break: break-word; styles work fine for long urls but it also splits shorter words in microsoft outlook 2010.
This is the default theme that comes out of the box:
/* Base */
body, body *:not(html):not(style):not(br):not(tr):not(code) {
font-family: Avenir, Helvetica, sans-serif;
box-sizing: border-box;
}
body {
background-color: #f5f8fa;
color: #74787E;
height: 100%;
hyphens: auto;
line-height: 1.4;
margin: 0;
-moz-hyphens: auto;
-ms-word-break: break-all;
width: 100% !important;
-webkit-hyphens: auto;
-webkit-text-size-adjust: none;
word-break: break-all;
word-break: break-word;
}
p,
ul,
ol,
blockquote {
line-height: 1.4;
text-align: left;
}
a {
color: #3869D4;
}
a img {
border: none;
}
/* Typography */
h1 {
color: #2F3133;
font-size: 19px;
font-weight: bold;
margin-top: 0;
text-align: left;
}
h2 {
color: #2F3133;
font-size: 16px;
font-weight: bold;
margin-top: 0;
text-align: left;
}
h3 {
color: #2F3133;
font-size: 14px;
font-weight: bold;
margin-top: 0;
text-align: left;
}
p {
color: #74787E;
font-size: 16px;
line-height: 1.5em;
margin-top: 0;
text-align: left;
}
p.sub {
font-size: 12px;
}
img {
max-width: 100%;
}
/* Layout */
.wrapper {
background-color: #f5f8fa;
margin: 0;
padding: 0;
width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
}
.content {
margin: 0;
padding: 0;
width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
}
/* Header */
.header {
padding: 25px 0;
text-align: center;
}
.header a {
color: #bbbfc3;
font-size: 19px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px 0 white;
}
/* Body */
.body {
background-color: #FFFFFF;
border-bottom: 1px solid #EDEFF2;
border-top: 1px solid #EDEFF2;
margin: 0;
padding: 0;
width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
}
.inner-body {
background-color: #FFFFFF;
margin: 0 auto;
padding: 0;
width: 570px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 570px;
}
/* Subcopy */
.subcopy {
border-top: 1px solid #EDEFF2;
margin-top: 25px;
padding-top: 25px;
}
.subcopy p {
font-size: 12px;
}
/* Footer */
.footer {
margin: 0 auto;
padding: 0;
text-align: center;
width: 570px;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 570px;
}
.footer p {
color: #AEAEAE;
font-size: 12px;
text-align: center;
}
/* Tables */
.table table {
margin: 30px auto;
width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
}
.table th {
border-bottom: 1px solid #EDEFF2;
padding-bottom: 8px;
margin: 0;
}
.table td {
color: #74787E;
font-size: 15px;
line-height: 18px;
padding: 10px 0;
margin: 0;
}
.content-cell {
padding: 35px;
}
/* Buttons */
.action {
margin: 30px auto;
padding: 0;
text-align: center;
width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
}
.button {
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
color: #FFF;
display: inline-block;
text-decoration: none;
-webkit-text-size-adjust: none;
}
.button-blue {
background-color: #3097D1;
border-top: 10px solid #3097D1;
border-right: 18px solid #3097D1;
border-bottom: 10px solid #3097D1;
border-left: 18px solid #3097D1;
}
.button-green {
background-color: #2ab27b;
border-top: 10px solid #2ab27b;
border-right: 18px solid #2ab27b;
border-bottom: 10px solid #2ab27b;
border-left: 18px solid #2ab27b;
}
.button-red {
background-color: #bf5329;
border-top: 10px solid #bf5329;
border-right: 18px solid #bf5329;
border-bottom: 10px solid #bf5329;
border-left: 18px solid #bf5329;
}
/* Panels */
.panel {
margin: 0 0 21px;
}
.panel-content {
background-color: #EDEFF2;
padding: 16px;
}
.panel-item {
padding: 0;
}
.panel-item p:last-of-type {
margin-bottom: 0;
padding-bottom: 0;
}
/* Promotions */
.promotion {
background-color: #FFFFFF;
border: 2px dashed #9BA2AB;
margin: 0;
margin-bottom: 25px;
margin-top: 25px;
padding: 24px;
width: 100%;
-premailer-cellpadding: 0;
-premailer-cellspacing: 0;
-premailer-width: 100%;
}
.promotion h1 {
text-align: center;
}
.promotion p {
font-size: 15px;
text-align: center;
}
This is the html source for a password reset as viewed in mailtrap - if you view this in a browser or microsoft outlook 2010, the media queries seem to have no effect (the action button does not become full width on small viewports) and the word-break style splits short words too:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #f5f8fa; color: #74787E; height: 100%; hyphens: auto; line-height: 1.4; margin: 0; -moz-hyphens: auto; -ms-word-break: break-all; width: 100% !important; -webkit-hyphens: auto; -webkit-text-size-adjust: none; word-break: break-word;">
<style>
@media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}
.footer {
width: 100% !important;
}
}
@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #f5f8fa; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<tr>
<td align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table class="content" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<tr>
<td class="header" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 25px 0; text-align: center;">
<a href="http://localhost" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #bbbfc3; font-size: 19px; font-weight: bold; text-decoration: none; text-shadow: 0 1px 0 white;">
Acme
</a>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #FFFFFF; border-bottom: 1px solid #EDEFF2; border-top: 1px solid #EDEFF2; margin: 0; padding: 0; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; background-color: #FFFFFF; margin: 0 auto; padding: 0; width: 570px; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px;">
<!-- Body content -->
<tr>
<td class="content-cell" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 35px;">
<h1 style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #2F3133; font-size: 19px; font-weight: bold; margin-top: 0; text-align: left;">Hello!</h1>
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #74787E; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">You are receiving this email because we received a password reset request for your account.</p>
<table class="action" align="center" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; margin: 30px auto; padding: 0; text-align: center; width: 100%; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%;">
<tr>
<td align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<tr>
<td align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table border="0" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<tr>
<td style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<a href="http://localhost/password/reset/c3812129c32941badb8fce18ae97522c3136a4a7d3cbed60f95a57b856252b00" class="button button-blue" target="_blank" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); color: #FFF; display: inline-block; text-decoration: none; -webkit-text-size-adjust: none; background-color: #3097D1; border-top: 10px solid #3097D1; border-right: 18px solid #3097D1; border-bottom: 10px solid #3097D1; border-left: 18px solid #3097D1;">Reset Password</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #74787E; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">If you did not request a password reset, no further action is required.</p>
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #74787E; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Regards,<br />Acme</p>
<table class="subcopy" width="100%" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; border-top: 1px solid #EDEFF2; margin-top: 25px; padding-top: 25px;">
<tr>
<td style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #74787E; line-height: 1.5em; margin-top: 0; text-align: left; font-size: 12px;">
If you’re having trouble clicking the "Reset Password" button, copy and paste the URL below
into your web browser: <a href="http://localhost/password/reset/c3812129c32941badb8fce18ae97522c3136a4a7d3cbed60f95a57b856252b00" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #3869D4;"></a><a href="http://localhost/password/reset/c3812129c32941badb8fce18ae97522c3136a4a7d3cbed60f95a57b856252b00" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #3869D4;">http://localhost/password/reset/c3812129c32941badb8fce18ae97522c3136a4a7d3cbed60f95a57b856252b00</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box;">
<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; margin: 0 auto; padding: 0; text-align: center; width: 570px; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px;">
<tr>
<td class="content-cell" align="center" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 35px;">
<p style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; line-height: 1.5em; margin-top: 0; color: #AEAEAE; font-size: 12px; text-align: center;">© 2018 Acme. All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Adam-78
All 9 comments
@Adam-78 I recently spent countless hours trying to make Outlook, Apple Mail and Gmail.com somewhat display our templates correctly. They are loosely based on the theme that ships with Laravel.
I learned several things including the fact that Outlook only displays backgrounds if you use the 1999 HTML property of bgcolor="#333333" something that obviously hasn't been used in a long time.
Also, Outlook, Gmail and Yahoo mail ignore all css media queries. You have to work around it using something like tables using percentages instead of explicit pixels.
Outlook adds padding to the entire message of about 10px in Outlook for iPhone. No work around here either.
Apple Mail ignores any word breaks and hyphenation rules defaulting to what it wants to do. No work around here.
Laravel in-lines all of the css and that really helps to set you up as best as possible when it comes to email clients but all and all, in my findings, email clients are closer to stone age browsers and typically will behave in unexpected ways. Outlook Web App is different from Outlook iPhone App, different from Mac Outlook and certainly different from Windows Outlook, so even Outlook can't agree with itself on how to properly display emails.
I was a very frustrated camper trying to make our templates look perfect and ended up with "as close as possible" renditions.
Would love to hear everyone else's adventures getting these things to work properly across all mail clients.
vicgonvt
on 1 Mar 2018
@vicgonvt The current 5.5 out of the box templates aren't mobile responsive even when viewed within a browser never mind any email client - in the example I've given, try viewing the template inside a browser and change the size of the viewport to less than 500px. You will note the action button does not resize to full width i.e. 100% as per the media query?
Adam-78
on 1 Mar 2018
I don't think media queries works with html email since the css inline tool
that we use.
On Thu, Mar 1, 2018, 5:28 PM Adam-78 notifications@github.com wrote:
@vicgonvt https://github.com/vicgonvt The current 5.5 out of the box
templates aren't mobile responsive even when viewed within a browser never
mind any email client - in the example I've given, try viewing the template
inside a browser and change the size of the viewport to less than 500px.
You will note the action button does not resize to full width.—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/laravel/framework/issues/23284#issuecomment-369531906,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAKjpleR1WSjfWkWyvuHYEkTrPZyxIDbks5tZ79FgaJpZM4SR3g_
.
crynobone
on 1 Mar 2018
@crynobone media queries should work if the email is viewed inside a browser because they have the !important property which would override any inline style.
Adam-78
on 1 Mar 2018
https://github.com/tijsverkoyen/CssToInlineStyles/issues/135#issuecomment-209432258
if the email is viewed inside a browser because they have the !important property which would override any inline style.
css-to-inline-styles convert all <style> to inline style (which is required by most Email Client), from the link above the project maintainer himself said that it doesn't support media queries.
crynobone
on 1 Mar 2018
@crynobone I doubt you have understood my reply. Scroll up...and paste the generated html email that I have posted and save it as .html. Now load that inside a browser - its only html markup and tell me if its responsive? Forget about the email client, just view the markup that is generated inside any latest browser.
Adam-78
on 1 Mar 2018
@Adam-78 I've found a fix!
Just move this block to head instead of body (this fix is based on https://templates.mailchimp.com/development/responsive-email/):
<style>
@media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}
.footer {
width: 100% !important;
}
}
@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
SohrabZ
on 30 Mar 2018
@SohrabZ outlook strips out <style> tag whether they are in the head or body which is why the media queries don't work
Adam-78
on 29 Jun 2018
Hi there,
Welcome to Laravel and we are glad to have you as part of the community.
Unfortunately this GitHub area is not for ideas, suggestions etc. This is only for issues/bugs with the framework code itself.
I will be closing your ticket here. You are able to open a ticket at https://github.com/laravel/ideas
Alternatively you are able to open a PR using the Contributions guidelines: https://laravel.com/docs/5.7/contributions#which-branch
If you feel I've closed this issue in error, please provide more information about how this is a framework issue, and I'll reopen the ticket.
Thanks in advance.
laurencei
on 2 Oct 2018
Related issues
shopblocks
·
3Comments
YannPl
·
3Comments
RomainSauvaire
·
3Comments
Fuzzyma
·
3Comments
ghost
·
3Comments
Most helpful comment
@Adam-78 I've found a fix!
Just move this block to head instead of body (this fix is based on https://templates.mailchimp.com/development/responsive-email/):