From 184732e726417760f38decf7e1013ffd8d1c7ba1 Mon Sep 17 00:00:00 2001 From: Ted Goas Date: Wed, 2 Jun 2021 06:54:40 -0400 Subject: [PATCH 1/2] Wrap table reset in media query --- cerberus-fluid.html | 7 ++++++- cerberus-hybrid.html | 7 ++++++- cerberus-responsive.html | 7 ++++++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/cerberus-fluid.html b/cerberus-fluid.html index 37e7e63..8b60086 100644 --- a/cerberus-fluid.html +++ b/cerberus-fluid.html @@ -85,9 +85,14 @@ table { border-spacing: 0 !important; border-collapse: collapse !important; - table-layout: fixed !important; margin: 0 auto !important; } + /* What it does: Prevents Mailchimp from inlining these styles. */ + @media all { + table { + table-layout: fixed !important; + } + } /* What it does: Uses a better rendering method when resizing images in IE. */ img { diff --git a/cerberus-hybrid.html b/cerberus-hybrid.html index ac1682e..b0d9ad7 100644 --- a/cerberus-hybrid.html +++ b/cerberus-hybrid.html @@ -84,9 +84,14 @@ table { border-spacing: 0 !important; border-collapse: collapse !important; - table-layout: fixed !important; margin: 0 auto !important; } + /* What it does: Prevents Mailchimp from inlining these styles. */ + @media all { + table { + table-layout: fixed !important; + } + } /* What it does: Uses a better rendering method when resizing images in IE. */ img { diff --git a/cerberus-responsive.html b/cerberus-responsive.html index 4575984..e789061 100644 --- a/cerberus-responsive.html +++ b/cerberus-responsive.html @@ -90,9 +90,14 @@ table { border-spacing: 0 !important; border-collapse: collapse !important; - table-layout: fixed !important; margin: 0 auto !important; } + /* What it does: Prevents Mailchimp from inlining these styles. */ + @media all { + table { + table-layout: fixed !important; + } + } /* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */ a { From a8c5b62dcbdf558891c1fe40ab36b2ed7f4ad952 Mon Sep 17 00:00:00 2001 From: Ted Goas Date: Wed, 2 Jun 2021 07:01:24 -0400 Subject: [PATCH 2/2] Wrap autodetected links and button hovers in a media query --- cerberus-fluid.html | 42 +++++++++++++++++++++++----------------- cerberus-hybrid.html | 42 +++++++++++++++++++++++----------------- cerberus-responsive.html | 42 +++++++++++++++++++++++----------------- 3 files changed, 72 insertions(+), 54 deletions(-) diff --git a/cerberus-fluid.html b/cerberus-fluid.html index 8b60086..afe2d44 100644 --- a/cerberus-fluid.html +++ b/cerberus-fluid.html @@ -87,7 +87,7 @@ border-collapse: collapse !important; margin: 0 auto !important; } - /* What it does: Prevents Mailchimp from inlining these styles. */ + /* What it does: Prevents styles from being inlined. */ @media all { table { table-layout: fixed !important; @@ -104,18 +104,21 @@ text-decoration: none; } - /* What it does: A work-around for email clients meddling in triggered links. */ - a[x-apple-data-detectors], /* iOS */ - .unstyle-auto-detected-links a, - .aBn { - border-bottom: 0 !important; - cursor: default !important; - color: inherit !important; - text-decoration: none !important; - font-size: inherit !important; - font-family: inherit !important; - font-weight: inherit !important; - line-height: inherit !important; + /* What it does: Prevents styles from being inlined. */ + @media all { + /* What it does: A work-around for email clients meddling in triggered links. */ + a[x-apple-data-detectors], /* iOS */ + .unstyle-auto-detected-links a, + .aBn { + border-bottom: 0 !important; + cursor: default !important; + color: inherit !important; + text-decoration: none !important; + font-size: inherit !important; + font-family: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + } } /* What it does: Prevents Gmail from displaying a download button on large, non-linked images. */ @@ -167,11 +170,14 @@ .button-a { transition: all 100ms ease-in; } - .button-td-primary:hover, - .button-a-primary:hover { - background: #555555 !important; - border-color: #555555 !important; - } + /* What it does: Prevents styles from being inlined. */ + @media all { + .button-td-primary:hover, + .button-a-primary:hover { + background: #555555 !important; + border-color: #555555 !important; + } + } /* Media Queries */ @media screen and (max-width: 600px) { diff --git a/cerberus-hybrid.html b/cerberus-hybrid.html index b0d9ad7..e718de8 100644 --- a/cerberus-hybrid.html +++ b/cerberus-hybrid.html @@ -86,7 +86,7 @@ border-collapse: collapse !important; margin: 0 auto !important; } - /* What it does: Prevents Mailchimp from inlining these styles. */ + /* What it does: Prevents styles from being inlined. */ @media all { table { table-layout: fixed !important; @@ -103,18 +103,21 @@ text-decoration: none; } - /* What it does: A work-around for email clients meddling in triggered links. */ - a[x-apple-data-detectors], /* iOS */ - .unstyle-auto-detected-links a, - .aBn { - border-bottom: 0 !important; - cursor: default !important; - color: inherit !important; - text-decoration: none !important; - font-size: inherit !important; - font-family: inherit !important; - font-weight: inherit !important; - line-height: inherit !important; + /* What it does: Prevents styles from being inlined. */ + @media all { + /* What it does: A work-around for email clients meddling in triggered links. */ + a[x-apple-data-detectors], /* iOS */ + .unstyle-auto-detected-links a, + .aBn { + border-bottom: 0 !important; + cursor: default !important; + color: inherit !important; + text-decoration: none !important; + font-size: inherit !important; + font-family: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + } } /* What it does: Prevents Gmail from changing the text color in conversation threads. */ @@ -165,11 +168,14 @@ .button-a { transition: all 100ms ease-in; } - .button-td-primary:hover, - .button-a-primary:hover { - background: #555555 !important; - border-color: #555555 !important; - } + /* What it does: Prevents styles from being inlined. */ + @media all { + .button-td-primary:hover, + .button-a-primary:hover { + background: #555555 !important; + border-color: #555555 !important; + } + } /* Media Queries */ @media screen and (max-width: 480px) { diff --git a/cerberus-responsive.html b/cerberus-responsive.html index e789061..6081cbc 100644 --- a/cerberus-responsive.html +++ b/cerberus-responsive.html @@ -92,7 +92,7 @@ border-collapse: collapse !important; margin: 0 auto !important; } - /* What it does: Prevents Mailchimp from inlining these styles. */ + /* What it does: Prevents styles from being inlined. */ @media all { table { table-layout: fixed !important; @@ -109,18 +109,21 @@ -ms-interpolation-mode:bicubic; } - /* What it does: A work-around for email clients meddling in triggered links. */ - a[x-apple-data-detectors], /* iOS */ - .unstyle-auto-detected-links a, - .aBn { - border-bottom: 0 !important; - cursor: default !important; - color: inherit !important; - text-decoration: none !important; - font-size: inherit !important; - font-family: inherit !important; - font-weight: inherit !important; - line-height: inherit !important; + /* What it does: Prevents styles from being inlined. */ + @media all { + /* What it does: A work-around for email clients meddling in triggered links. */ + a[x-apple-data-detectors], /* iOS */ + .unstyle-auto-detected-links a, + .aBn { + border-bottom: 0 !important; + cursor: default !important; + color: inherit !important; + text-decoration: none !important; + font-size: inherit !important; + font-family: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + } } /* What it does: Prevents Gmail from changing the text color in conversation threads. */ @@ -171,11 +174,14 @@ .button-a { transition: all 100ms ease-in; } - .button-td-primary:hover, - .button-a-primary:hover { - background: #555555 !important; - border-color: #555555 !important; - } + /* What it does: Prevents styles from being inlined. */ + @media all { + .button-td-primary:hover, + .button-a-primary:hover { + background: #555555 !important; + border-color: #555555 !important; + } + } /* Media Queries */ @media screen and (max-width: 600px) {