I've set up a simple responsive HTML/CSS page that could be used as HTML Email and although it's responsive on website, when I try to send it with gmail, it messes everything up. The logos get smaller, the button gets no style whatsoever. Sometimes when I try to send the email it shows the items in horizontal way and not vertical like I want.
I have tried sending the email with multiple online providers for such service but the code is always wrong, also I have read that inline styling is better and I've tried that as well but still to no avail.
Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Saira:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
background-color: rgb(187, 187, 187);
padding: 10%;
font-family: 'Montserrat', sans-serif;
font-family: 'Saira', sans-serif;
}
.container {
background-color: white;
display: flex;
flex-direction: column;
}
.header {
height: 130px;
display: flex;
align-items: center;
width: 100%
}
#logo {
max-height: 60%;
margin-left: 2vw;
max-width: 100%
}
#banner {
max-width: 100%;
}
.titulli {
display: flex;
justify-content: center;
font-size: 3vw;
}
.teksti {
background-color: rgb(236, 236, 236);
}
p {
margin: 2vw 10vw 2vw 10vw;
}
.butonat{
display: flex;
flex-direction: column;
align-items: center;
margin: 5vw;
}
#butoni{
margin-bottom: 3vw;
font-size: 4vw;
font-weight: bold;
height: 10vw;
width: 30vw;
border:none;
background-color: rgb(255, 230, 0);
border-radius: 10%;
}
.grupiLogot{
display: flex;
flex-direction: row;
}
.logot {
max-width: 7vw;
padding: 0.5vw;
}
.footeri{
color: rgb(255,230,0);
background-color: rgb(27, 27, 27);
display: flex;
flex-direction: column;
align-items: center;
padding: 4vw 0 4vw 0;
}
h4{
margin: 0.2vw;
font-weight: 300;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<!-- <img id="logo" src="logo.png" alt=""> -->
<img id="logo" src="https://i.ibb.co/GtY9kYz/logo2.png" alt="">
</div>
<img id="banner" src="https://i.ibb.co/LtG9PDg/banner.png" alt="">
<div class="titulli">
<h2>20% Off Summer Sale Now!</h2>
</div>
<div class="teksti">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias necessitatibus eos inventore minus
velit, quas fugiat expedita explicabo consequuntur ea enim temporibus nostrum deserunt, veniam,
voluptatum assumenda libero nesciunt ipsa.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nemo tenetur sunt eligendi quae maxime
nesciunt! Iure consequatur ad quaerat.</p>
</div>
<div class="butonat">
<button id="butoni">SHOP NOW</button>
<div class="grupiLogo">
<img src="https://i.ibb.co/XY5W1hV/facebook.png" alt="" class="logot">
<img src="https://i.ibb.co/JdSsCN3/instagram.png" alt="" class="logot">
<img src="https://i.ibb.co/Cv91mdp/twitter.png" alt="" class="logot">
<img src="https://i.ibb.co/j3rdqgk/whatsapp.png" alt="" class="logot">
</div>
</div>
<div class="footeri">
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
<h4>Lorem ipsum dolor sit.</h4>
</div>
</div>
</body>
</html>Here are screenshots from how it shows on Iphone: https://i.sstatic.net/Spk1F.jpg
You need to get familiar with what is supported and what isn't. One service that does this is caniemail.com. Flex, for example, is not supported.
Generally people resort to table layouts due to Outlook desktop on Windows.
There are some versions of Gmail, amongst other email environments, that disregard your <style> section(s), so you do need to inline the styles too.
Search for 'fluid hybrid email' for a basic structure to get you going.
You may need emailresourc.es too for a wide range of information.
