Menu
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:
but this is what gmail displays:
when i inspect the gmail and check the css there this is what is saw:
no flex-direction or the others what do i do?
340
asked Sep 14 '25 03:09
I think Gmail does not support flex https://www.campaignmonitor.com/css/flexbox/flex/
170
answered Sep 15 '25 19:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With