After sending a test email, inline CSS in Gmail seems to be functioning to some extent

While working on applying inline CSS styling to HTML for email, I have encountered an issue where the styling partially works when sending a test email. Can anyone provide guidance on how to resolve this problem?

Steps to reproduce:

Step 1 - apply CSS styling to HTML in an inline manner (please refer to the code snippet below).

<div class=" product-items" style="max-width: 600px;">
<div class="button-div" style="margin-bottom: 45px; text-align: center;">
   <a href="#" style="background: #F26E11; padding: 13px 24px 14px; box-shadow: 16px 20px 10px rgba(0, 0, 0, 0.01), 9px 12px 9px rgba(0, 0, 0, 0.05), 4px 5px 6px rgba(0, 0, 0, 0.09), 1px 1px 4px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); border-radius: 15px; margin: auto; color:#FFF; text-decoration: none;">
   <span>Complete Order</span>
   <span class="arrow-icon" style="background: #F9B788; border-radius: 50%; padding: 1px 3px;">
   <img src="//app.squeezely.tech/uploads/prod/personalization/63c01436e8098.png">
   </span>
   </a>
</div>
<table align="center" class="mcnTable product-item" border="0" cellpadding="0" cellspacing="0" width="288" style="margin-top: 10px;  background: #F9F9F9; box-shadow: 9px 22px 10px rgb(51 33 42 / 2%), 5px 13px 8px rgb(51 33 42 / 5%), 2px 6px 6px rgb(51 33 42 / 9%), 1px 1px 3px rgb(51 33 42 / 10%), 0px 0px 0px rgb(51 33 42 / 10%); border-radius: 10px;">

Result:

Expected output:

https://i.sstatic.net/9SRj0.png

Actual result:

https://i.sstatic.net/VGj0F.png

Upon inspecting the Chrome console, it appears that some inline styling is being removed, particularly from the table tag.

https://i.sstatic.net/vlLvo.png

If anyone has advice on resolving this issue, please share your insights.

htmlcsshtml-emailinline-styles

Answer №1

When dealing with Gmail, it's important to note that the box-shadow property is not supported (check out Can I email for more information). By default, Gmail should only remove the box-shadow property without causing any issues. However, if your <table> tag includes a slash notation such as rgb(51 33 42 / 2%), Gmail's parser tends to get confused and may end up removing the entire corresponding inline style attribute. To avoid this problem, it is recommended to avoid using the slash notation and opt for hexadecimal colors instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Parallax scrolling within a div creates a dynamic visual effect

Hello there, thank you for taking the time to read this. I am currently working on a website and encountering some challenges while trying to implement a specific effect. I am aiming to achieve a parallax effect similar to what can be seen on this page. As ...

jqueryhtmlcssparallax

Tips for achieving consistent outcomes on both IE and Chrome when utilizing the `min` attribute in HTML input tags

The display of input fields is inconsistent between IE (version 11) and Chrome (version 46.0.2490.71) when using the min option in the HTML input tag. In Chrome, the input fields appear extra long, while in IE they display correctly (same as when min is no ...

htmlcss

Merge multiple list groups into one with a single active selection using Bootstrap List group functionality

Currently, I am experimenting with merging Bootstrap's accordion and list group with JS behavior. My goal is to create a set of list groups where only one option can be active at a time within each accordion. <link rel="stylesheet" href="https:/ ...

javascriptjquerycssbootstrap-4

Creating Vertical Text and Div Blocks using CSS

Trying to set up different color section blocks with vertical text on my website's dashboard page. Similar to this example in JSfiddle: http://jsfiddle.net/afpn2y19/4/ <div id="outer"> <div id="inner"> //Feeling lost - ho ...

htmlcsstextrotation

Is it possible to apply two ngClass directives to a single div element in Angular 4?

When I click to start editing, a component is called for the editing process. In this component, I am unable to click on anything and the background turns black, which is okay. However, I would like for each ID that I select to edit to become active with a ...

htmlcssangulartypescript

What is the process for configuring text on an md-Switch?

I need help setting informational text on an md-switch element from Angular Material design. I want the user to be able to easily understand the current state of a field value. Here is a visual example of what I'm trying to achieve: https://i.sstatic. ...

cssangularjsmaterial-designangular-uiangular-material

CSS: Containers displayed side by side when screen width is above a certain threshold, otherwise stacked on top of each other

I am trying to make two containers responsive without using media queries or JavaScript. When the screen size is 500px or less, I want the containers to stack on top of each other and take up 100% of the screen width. But when the screen size exceeds 500 ...

htmlcss

When the previous textbox is filled, the cursor will automatically move to the button

Utilizing an RFID reader where students tap their ID to display basic info, a hidden button on the form opens a modal with various purposes for selection. The challenge is shifting focus of cursor to the button and automatically clicking it when the last ...

javascriptphpjqueryhtml

The priority of custom attributes in HTML

There seems to be some ambiguity regarding whether data- attributes should be considered primary or secondary syntax. Is there a defined standard for this in major frameworks like Angular? For example, if an attribute is specified as both my-attr and dat ...

javascripthtmldom

The JSON ticker for BTC/LTC has stopped functioning

I've been relying on this JSON ticker for the past month and it's been smooth sailing. However, today it suddenly stopped working. Any ideas on what might have caused this issue? $(function () { startRefresh(); }); function startRefresh() { ...

javascriptjqueryhtmljsonbitcoin

How can I ensure that my jQuery code only executes after the mobile CSS has been loaded

When it comes to loading my mobile-only CSS, I typically use a media query similar to: <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/includes/css/mobile.css" /> However, in addition to these CSS mod ...

jquerycss

Is there a way to retrieve the left offset of a floating element even when it is positioned outside the viewport?

My current situation involves creating several panels that are stacked side by side within a main container. Each panel takes up 100% of the viewport width and height. I want to be able to horizontally scroll to each panel when clicking on their respective ...

javascriptjqueryhtmlcssviewport

The website displays perfectly in Atom, however, it is not functional in any web browser

My website is currently in the development phase, and I'm experiencing issues with certain div elements not positioning correctly once the site goes live. Specifically, the "Follow Us" tab at the bottom of the site, among other divs, has been affecte ...

javascripthtmlcss

Display loading spinner and lock the page while a request is being processed via AJAX

Currently, I am working on a project using MVC in C#, along with Bootstrap and FontAwesome. The main objective of my project is to display a spinner and disable the page while waiting for an ajax request. Up until now, I have been able to achieve this go ...

javascriptjqueryhtmlajax

What is the best way to turn off the annoying pop-up messages that show up for input validation, specifically the one that says "Please complete

Currently using Angular 2, my form has input fields similar to this simplified version: <input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1"> <!--more inputs like this --> Although I have implement ...

javascripthtmlformsangular

Display the field names from a MySQL table on a web page

Is there a way to show all column names from a MySQL table on a webpage if only the table name is known? ...

phphtmlmysqlcss

Python selenium issue: Element not found in the document using locator (//input[@type='file']')

I'm attempting to automate the process of uploading a file using python. However, when I run the code below with python selenium, an error is thrown. I even added a 10-second wait to prevent synchronization issues. driver.execute_script('window ...

pythonhtmlseleniumautomation

Creating a grid layout with alternating patterns

I'm facing a challenge in creating an alternating grid layout using CSS, and it's proving to be more difficult than I anticipated. My goal is to design a layout with two boxes that alternate - first a box containing text, followed by a box displ ...

htmlcsscss-grid

Transform your CSS styles into Material-UI makestyles

I am looking to implement an IconButton with a website preview feature that appears when the user hovers over the help icon. I came across a similar solution using CSS, but I need to convert it to Material UI. Here is the CSS code that needs to be converte ...

javascriptcssreactjsmaterial-ui

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

cssreactjsstyled-componentsclassnameclass-names