'My responsive HTML Email is not responsive when it's actually sent on Gmail

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://imgur.com/a/6ZZEpXt

htmlcssresponsive-designhtml-email


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions