Outlook can’t render the CSS in this DIV but other email clients can, so we wrap this in a ghost table that replicates the DIV’s desktop style. In this case, a container 340px wide.
```
--------------------------------
### Centering Utility Class
Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-hybrid.html
A generic utility class for centering elements like images, buttons, and nested tables on narrow screens. Apply `.center-on-narrow` to the element.
```css
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
```
--------------------------------
### Create Email Button with HTML
Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md
Use this HTML structure to create a button that displays consistently across email clients. It includes styles for hover effects and dark mode.
```html
| Primary Button |
| Foreground HTML content. |
| Button Text |
| … |
```
--------------------------------
### Improve Readability on Small Screens
Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-responsive.html
Adjusts paragraph font size within the email container for better readability on small screens.
```css
.email-container p { font-size: 17px !important; }
```
--------------------------------
### Setting Background Colors with HTML Attributes
Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md
Applies a solid background color to a table using the `bgcolor` HTML attribute. This method is well-supported across email clients.
```html
| … |
- `) and ordered (`
- `) to create vertical spacing.
```html
- Unordered list item
- Unordered list item
- Unordered list item
- Ordered list item
- Ordered list item
- Ordered list item
``` -------------------------------- ### Web Font Implementation with Fallbacks Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Includes a web font using Google Fonts and provides fallbacks for email clients that do not support web fonts, specifically addressing Windows Outlook compatibility using conditional comments. ```html… … Text in Lobster in email clients that support web fonts.
``` -------------------------------- ### Workaround for Triggered Links in Email Clients Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-responsive.html A workaround for email clients that interfere with triggered links. This styles detected links to prevent unwanted behavior. ```css 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; } ``` -------------------------------- ### Fix Webkit Padding and Table Layout Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-fluid.html Applies standard table properties to fix webkit padding issues and ensure consistent table rendering. ```css table { border-spacing: 0 !important; border-collapse: collapse !important; table-layout: fixed !important; margin: 0 auto !important; } ``` -------------------------------- ### HTML Headings with Inline Styles Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Use semantic heading tags (``, `
`, `
`) for text hierarchy. Apply inline styles to control font size, margins, and padding, ensuring consistent appearance across email clients. Zero out default margins and padding as needed. ```html
Heading level 1
Heading level 2
Heading level 3
``` -------------------------------- ### Responsive Email Container Widths Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-fluid.html Adjusts the minimum width of the email container for different iPhone viewports to ensure proper display. ```css @media only screen and (min-device-width: 320px) and (max-device-width: 374px) { u ~ div .email-container { min-width: 320px !important; } } ``` ```css @media only screen and (min-device-width: 375px) and (max-device-width: 413px) { u ~ div .email-container { min-width: 375px !important; } } ``` ```css @media only screen and (min-device-width: 414px) { u ~ div .email-container { min-width: 414px !important; } } ``` -------------------------------- ### HTML Paragraphs with Inline Styles Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Utilize paragraph tags (``) for body text. Apply inline styles to manage spacing and ensure consistent rendering. It's crucial to zero out default margins and padding that email clients might apply. ```html
Paragraph text
More paragraph text
``` -------------------------------- ### Typography Adjustments for Small Screens Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-fluid.html Adjusts paragraph font size on screens smaller than 600px to improve readability. ```css @media screen and (max-width: 600px) { .email-container p { font-size: 17px !important; } } ``` -------------------------------- ### Responsive Email Container and Stacked Columns Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-responsive.html Adjusts the email container width to 100% on screens smaller than 600px. Also forces table cells into full-width rows and centers stacked columns. ```css @media screen and (max-width: 600px) { .email-container { width: 100% !important; margin: auto !important; } /* Forces table cells into full-width rows. */ .stack-column, .stack-column-center { display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important; } /* And center justify these ones. */ .stack-column-center { text-align: center !important; } } ``` -------------------------------- ### Dark Mode Styles Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-fluid.html Defines styles for dark mode, including background colors, text colors, and button appearances, to ensure readability and aesthetics. ```css @media (prefers-color-scheme: dark) { .email-bg { background: #111111 !important; } .darkmode-bg { background: #222222 !important; } h1, h2, h3, p, li, .darkmode-text, .email-container a:not([class]) { color: #F7F7F9 !important; } td.button-td-primary, td.button-td-primary a { background: #ffffff !important; border-color: #ffffff !important; color: #222222 !important; } td.button-td-primary:hover, td.button-td-primary a:hover { background: #cccccc !important; border-color: #cccccc !important; } .footer td { color: #aaaaaa !important; } .darkmode-fullbleed-bg { background-color: #0F3016 !important; } } ``` -------------------------------- ### Center Content on Android 4.4 Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-fluid.html Centers email content specifically for Android 4.4 by overriding default margins. ```css div[style*="margin: 16px 0"] { margin: 0 !important; } ``` -------------------------------- ### Handle Form Submissions with Dynamic Content Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/templates.md This JavaScript code listens for clicks on elements with the class 'parcel-button'. If the 'data-url' attribute is present and the 'data' form element is empty, it fetches HTML content from the URL, encodes it, and submits the form. Otherwise, it submits the form directly. This is useful for forms that may need to dynamically load content before submission. ```javascript (function () { const forms = document.querySelectorAll('.parcel-button'); for (let i = 0; i < forms.length; i++) { const form = forms[i]; form.addEventListener('click', function (event) { const url = form.getAttribute('data-url'); // if we have a url to fetch html from if (!form.elements.data.value && url) { event.preventDefault(); // fetch the data, update the value to fetch(url) .then((response) => { return response.text(); }) .then((html) => { // set the value of the email content and resubmit the form form.elements.data.setAttribute( 'value', encodeURIComponent(JSON.stringify({ name: 'Email', html })) ); form.submit(); }); } else { form.submit() } }); } })(); ``` -------------------------------- ### Typography Adjustment for Readability Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-hybrid.html Adjusts paragraph font size within the email container on small screens to enhance readability. Apply this within a responsive media query. ```css .email-container p { font-size: 17px !important; } ``` -------------------------------- ### Reset Default Bold Style for Table Headers Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-responsive.html Replaces the default bold style for table header cells (th) with a normal font weight. ```css th { font-weight: normal; } ``` -------------------------------- ### Remove Email Client Margins and Padding Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-responsive.html Resets margin and padding for HTML and body elements to ensure consistent layout across email clients. Beware: This may affect the compose window's padding and background color. ```css html, body { margin: 0 auto !important; padding: 0 !important; height: 100% !important; width: 100% !important; } ``` -------------------------------- ### Prevent Gmail Download Button Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-fluid.html Prevents Gmail from displaying a download button on large, non-linked images by hiding them. ```css .a6S { display: none !important; opacity: 0.01 !important; } ``` -------------------------------- ### Center Email Content on Android 4.4 Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-responsive.html Forces centering of email content on Android 4.4 by overriding default margin styles. ```css div[style*="margin: 16px 0"] { margin: 0 !important; } ``` -------------------------------- ### Force Viewport Width on Samsung Android Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-fluid.html Ensures Samsung Android mail clients use the entire viewport width. ```css #MessageViewBody, #MessageWebViewDiv { width: 100% !important; } ``` -------------------------------- ### Prevent Gmail Download Button on Large Images Source: https://github.com/emailmonday/cerberus/blob/main/cerberus-responsive.html Hides the download button that Gmail may display on large, non-linked images. If this doesn't work, add the '.g-img' class to the image. ```css .a6S { display: none !important; opacity: 0.01 !important; } /* If the above doesn't work, add a .g-img class to any image in question. */ img.g-img + div { display: none !important; } ``` -------------------------------- ### Unstyling Auto-Detected Links Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Applies CSS to prevent email clients from auto-styling detected links (like addresses or dates) to match surrounding text. This requires the email client to support styles in the head. ```htmlOur mailing address is 123 Fake St.
``` -------------------------------- ### Target Specific Outlook Versions with MSO Tags Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/outlook.md Utilize Microsoft Office version numbers within MSO conditional comments to precisely target specific versions of Outlook for custom code or styling. This is useful when certain Outlook versions exhibit unique rendering behaviors. ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` -------------------------------- ### HTML Spacer for Table Row Separation Source: https://github.com/emailmonday/cerberus/blob/main/docs/content/components.md Employ a spacer `` with a hidden ` ` to create vertical space between table rows when padding and margin are unreliable. Set `height` for the desired spacing, hide it from screen readers using `aria-hidden="true"`, and use ` ` to prevent collapse. Inline styles for `font-size` and `line-height` prevent unwanted inherited spacing. ```html
- `) lists. Apply inline styles to control padding, margins, and list-style-type for consistent presentation. Adjust `margin` on list items (`