gmail not displaying full CSS styles

My current project involves sending verification emails to users using the php mail function. The email is styled with html and css, and while most of the styling appears correctly when the email is received, I noticed that certain flex commands such as flex-direction are not rendering properly. Upon inspecting the email code, I realized that these specific CSS properties were missing from the sent email. Here is a snippet of the HTML code:

<!DOCTYPE html>
    <html lang="en">
      ...
       // Complete HTML code goes here
      ...
    </html>

Expected outcome: https://i.sstatic.net/Yn6qm.png

Actual Gmail display: https://i.sstatic.net/3I3Z0.png

Upon inspecting Gmail's code, I found that certain flex properties like flex-direction were missing. How can I resolve this issue?

htmlcssgmail

Answer №1

In my opinion, Gmail is not compatible with the flexbox feature. You can learn more about this limitation by visiting this link.

Answer №2

My recommendation would be to customize the table elements according to your preferences. It is likely that you will need to eliminate all the display, align, and flex-direction properties present in your CSS.

<style>
          *{
            padding: 0;
            margin: 0;
            font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif
          }

    
          .recover a {
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-decoration: none;
            font-weight: 500;
            width: 50%;
            height: 20%;
            background: #00a761;
            color: white;
            font-size: 15px;
          }
    
          .recover a:hover {
            background: #00d67d;
          }
          .recover h1 {
            color: white;
            margin-bottom: 1%;
          }
          .recover p {
            color: #afafaf;
            width: 50%;
            text-align: center;
            margin-bottom: 1%;
          }
         .recoverall .recover{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 5px;
            width: 80%;
            height: 250px;
            background: #292929;
        }
         .recoverall{
            display: flex;
            justify-content: space-around;
            background: #070707;
            width: 100%;
            height: 100vh;
            padding-top: 5%;
        }
          
          @media screen and (max-width: 768px) {
            .recover h1 {
              font-size: 15px;
            }
            .recoverall {
              width: 100%;
            }
            .recover p {
              font-size: 10px;
              width: 95%;
            }
            .recover a {
              width: 70%;
            }
          }
        </style>
      <body>
        <table  class="recoverall" border="1" cellpadding="0" cellspacing="0" width="100%">
 <tbody  class="recover"><tr>
  <td>
   <h1>Recover Your Password</h1>
  </td>
 </tr>
 <tr>
  <td>
   <p>
              We Have Recive a request Fom this Account to reset Your password, if
              you have not sent this request ignore, but if You Are the One that
              sent it, Click the button Below
            </p>
  </td>
 </tr>
 <tr>
  <td>
   <a href='XXX'>Click Here To Continue</a>
  </td>
 </tr>
</tbody></table>
      </body>

Answer №3

Consider utilizing CSS grid for a more effective layout.

.recoverall {
  display: grid;
  background-color: #070707;
  width: 100%;
  height: 100vh;
  padding-top: 5%;
}

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

incorrect indexing in ordered list

I am facing an issue with the ngIf directive in Angular. My objective is to create a notification system that alerts users about any missing fields. Here's a stackblitz example showcasing the problem: https://stackblitz.com/edit/angular-behnqj To re ...

htmlangulartypescript

Does the XMLHttpRequests have a NavigationTiming interface that can be utilized?

While the window.performance object offers insights into the performance of the browser's last page load, such as DNS lookup times, I have not come across a similar feature for Ajax calls. The overarching issue I am aiming to address is the ability t ...

javascriptajaxhtmlgoogle-analyticsxmlhttprequest

Is it possible to customize a row with checkboxes in ng2-smart-table when creating a new row?

When adding a new row, I would like a checkbox in the Status column and an input text field in the Image column. You can see an example image here. ...

htmlcssangulartypescriptng2-smart-table

Issues with PHP Form Email DeliveryIt seems that there is a

I currently have a ready-made form that is constructed using html, css, jquery, and ajax. It's basically copied and pasted onto my contact page for now. This is the code I include before the html tag on the contact.php page. <?php session_name(" ...

phpjqueryhtmlcssforms

Difference among rows

I am currently working on a table design with 2 rows that have different colors. There seems to be some space between the two rows and I am looking for a way to eliminate that gap. Can anyone provide me with a solution? https://i.stack.imgur.com/8N8Rw.png ...

htmlhtml-table

Angular - Modifying the Styling of a TypeScript-Generated Element

I'm facing an issue where the styles I try to apply to a div generated using TypeScript's createElement function are not taking effect. UPDATE: After some troubleshooting, I was able to resolve the issue by adding the style in the global project ...

javascriptcssangulartypescriptdom

Having trouble with the CSS positioning of divs created with JavaScript: it's not behaving as anticipated

Let me start by saying I have always struggled with CSS positioning. It seems like I am missing something simple here... So, I have a JS script that generates divs within a parent container called #container which is set to absolute position. Here is the ...

cssjavascript

Confirm the email address using the autocomplete feature in the field

I'm currently utilizing Material UI to design an autocomplete field with multiple inputs that gives users the option to either choose from existing email addresses or input their own. An example of what I'm trying to achieve can be seen here: ht ...

javascripthtmlreactjsmaterial-ui

Nested lists with consistent height regardless of the quantity of items

I am currently working on a dropdown multicolumn menu that contains nested lists. My goal is to ensure that all three lists (or columns) have the same height, even if they contain a different number of items. Since the lists are dynamic and the number of i ...

javascripthtmlcss

Identify repeated entries in an HTML table by comparing the values in the first two columns

One of my requirements is to check for duplicate data in an HTML table. The table consists of two columns - product name and batch. While the product name can be repeated, if the same batch repeats for the same product name, I need to display an alert with ...

javascriptjqueryhtml

Optimal approach to integrating images with text containers

I have a task that is presenting me with some challenges in terms of the best approach to take. Therefore, I am reaching out to ask for your help and input. My assignment involves creating a form on a webpage using ASP.NET WebForms, with multiple textboxe ...

asp.netcsshtml

The :host selector is not functioning properly for a custom element with shadow DOM

I am currently in the process of developing a custom component with shadow dom attached to it. The custom component is successfully created and added to the dom with shadow dom attached, but for some reason, the :host style is not being applied. HTML < ...

javascripthtmlcssweb-component

Refresh the content of a webpage in AngularJS without the need to fully reload the entire page

Within my controller and view files, I have content that is sourced from various places, including API calls. For instance, I have information retrieved from the database where users can update certain details like their last name. After submitting the up ...

javascripthtmlangularjs

Balanced arrangement of components

As I work on my first electron app, I've created the initial layout. My goal is to have elements resize when the user adjusts the window size: The red part should change in both width and height The blue part should only adjust in height, not width ...

javascripthtmlcssreactjselectron

What could be causing me to receive the string "Ã-" instead of "×" while defining the content for button:after?

I have implemented the following CSS code to style a button that is used to remove a tag: button.close:after { content: '×'; } As a result, the button looks like this: https://i.sstatic.net/MhKI5.png However, there is an issue where the ch ...

htmlcssless

The presence of the `ng-scope` class is creating problems within the user interface

Encountering an issue where the CSS class ng-scope is causing disruption to the user interface. The goal is to set the height of the toDoListRow div to 70%. However, this only works if the ng-scope class is defined with a height of 100%, leading to unexpe ...

cssangularjsbootstrap-4angularjs-scope

Is there a way to customize the color of the collapsible menu?

I am currently delving into Bootstrap to enhance my skills. I decided to utilize the example navbar provided in the documentation: <nav class="navbar navbar-expand-lg navbar-light bg-primary"> <div class="container-fluid"&g ...

htmlcsstwitter-bootstrapbootstrap-5

Modify the :after property of an element using jQuery

Is there a different approach I can take to achieve this desired outcome? Currently, the code snippet below is not yielding the expected results. $('.child_flyout:after').css({'top':'20px'}); Are there any alternative method ...

jquerycss

Tips for successfully sending an HTML form with an uploaded file in HTML email?

I understand that sending a HTML Form in an HTML email is possible. Here is an example What I am curious about is whether it is feasible to include a file attachment in this form. This would allow the recipient of the email to enter information into the f ...

htmlformsemailfile-uploadsubmit

Attempting to apply custom styles to jQuery components using CSS

Looking to restyle the black bar on my test page located at The black bar with 3 tabs about halfway down the page needs a new color scheme. By inspecting with FireBug, I found these elements: <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ...

jquerycss