Search code examples
htmlcssgmail

css not showing completely in gmail

I am trying to send a verification email to the users email using php mail function, the email is in html and css. in the mail everything shows, colors, font-size etc but flex-direction and other flex commands are not working, i even inspected the email and found out that it was not even included in the code whiles i sent it in the email this is the html:

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Recover</title>
        <link rel="shortcut icon" type="image/x-icon" href="./img/logo.png" />
        <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>
      </head>
      <body>
        <div class="recoverall">
           <div class="recover">
            <h1>Recover Your Password</h1>
            <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>
            <a href='XXX'>Click Here To Continue</a>
          </div> 
        </div>
      </body>
    </html>

this is what is supposed to show: enter image description here

but this is what gmail displays: enter image description here

when i inspect the gmail and check the css there this is what is saw: enter image description here

no flex-direction or the others what do i do?

Solution

  • So what will be recommand is: I let you adapt the table elements as you wish. And probably you will need to remove all the display / align / flex-direction you have 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>