From cb253049a25c50dcbc9d27344b317354a8ae0469 Mon Sep 17 00:00:00 2001 From: Kevin Van Lierde Date: Mon, 22 Nov 2021 15:27:59 +0100 Subject: [PATCH 1/3] Fixes #148 - table[class=body] incompatibility to table.body --- email.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/email.html b/email.html index 322f809..163c98a 100644 --- a/email.html +++ b/email.html @@ -249,41 +249,41 @@ RESPONSIVE AND MOBILE FRIENDLY STYLES ------------------------------------- */ @media only screen and (max-width: 620px) { - table[class=body] h1 { + table.body h1 { font-size: 28px !important; margin-bottom: 10px !important; } - table[class=body] p, - table[class=body] ul, - table[class=body] ol, - table[class=body] td, - table[class=body] span, - table[class=body] a { + table.body p, + table.body ul, + table.body ol, + table.body td, + table.body span, + table.body a { font-size: 16px !important; } - table[class=body] .wrapper, - table[class=body] .article { + table.body .wrapper, + table.body .article { padding: 10px !important; } - table[class=body] .content { + table.body .content { padding: 0 !important; } - table[class=body] .container { + table.body .container { padding: 0 !important; width: 100% !important; } - table[class=body] .main { + table.body .main { border-left-width: 0 !important; border-radius: 0 !important; border-right-width: 0 !important; } - table[class=body] .btn table { + table.body .btn table { width: 100% !important; } - table[class=body] .btn a { + table.body .btn a { width: 100% !important; } - table[class=body] .img-responsive { + table.body .img-responsive { height: auto !important; max-width: 100% !important; width: auto !important; From d4cda72ffd8a5a555456117e102156ff7956e442 Mon Sep 17 00:00:00 2001 From: Kevin Van Lierde Date: Mon, 22 Nov 2021 15:28:52 +0100 Subject: [PATCH 2/3] Fixes #126 - correct viewport meta tag --- email.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/email.html b/email.html index 163c98a..7d38208 100644 --- a/email.html +++ b/email.html @@ -1,7 +1,7 @@ - + Simple Transactional Email +@media only screen and (max-width: 620px) { + table.body h1 { + font-size: 28px !important; + margin-bottom: 10px !important; + } + + table.body p, +table.body ul, +table.body ol, +table.body td, +table.body span, +table.body a { + font-size: 16px !important; + } + + table.body .wrapper, +table.body .article { + padding: 10px !important; + } + + table.body .content { + padding: 0 !important; + } + + table.body .container { + padding: 0 !important; + width: 100% !important; + } + + table.body .main { + border-left-width: 0 !important; + border-radius: 0 !important; + border-right-width: 0 !important; + } + + table.body .btn table { + width: 100% !important; + } + + table.body .btn a { + width: 100% !important; + } + + table.body .img-responsive { + height: auto !important; + max-width: 100% !important; + width: auto !important; + } +} +@media all { + .ExternalClass { + width: 100%; + } + + .ExternalClass, +.ExternalClass p, +.ExternalClass span, +.ExternalClass font, +.ExternalClass td, +.ExternalClass div { + line-height: 100%; + } + + .apple-link a { + color: inherit !important; + font-family: inherit !important; + font-size: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + text-decoration: none !important; + } + + #MessageViewBody a { + color: inherit; + text-decoration: none; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + line-height: inherit; + } + + .btn-primary table td:hover { + background-color: #34495e !important; + } + + .btn-primary a:hover { + background-color: #34495e !important; + border-color: #34495e !important; + } +} + - + - - +