Блог

Я уже просмотрел весь код, и он выглядит нормально. Ширина и высота выглядят хорошо. Но, когда я отправляю ее по электронной почте, она приходит в беспорядке, помня, что это было сделано в mailchimp. Похоже, что шаблон mailchimp обрезает и настраивает веб-почту.

 <style type="text/css">

#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
.ReadMsgBody{width:100%;  background-color: #ffffff;} .ExternalClass{width:100%; background-color: #ffffff;} /* Force Hotmail to display emails at full width */

@font-face {font-family:'HelveticaNeue';        font-weight:300;        src:url(./assets/font/HelveticaNeue-Light.otf);}
@font-face {font-family:'HelveticaNeue';        font-weight:500;        src:url(./assets/font/HelveticaNeue-Medium.otf);}
@font-face {font-family:'HelveticaNeue';        font-weight:700;        src:url(./assets/font/HelveticaNeue-Bold.otf);}
@font-face {font-family:'HelveticaNeue';        font-weight:600;        src:url(./assets/font/HelveticaNeue-Black.otf);}
    body{
        margin:0;
    }
    body,#main{
        color:#144379 !important;
        max-width:600px !important;
        overflow-x:hidden;
        width:600px !important;
    }
    body,#main,input,button{
        font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;
    }
    #main{
        background-color:#a29d9c;
        background-image:url(https://drive.google.com/uc?export=view26 id=18b-Ol_YWPeDzX7a4LC9ncqz9GT-QlU46);
        background-position:center;
        background-size:cover;
        box-sizing:border-box;
        color:#144379;
        font-weight:500;
        overflow-x:hidden;
        padding:20px;
        width:600px;
    }
    a,button{
        cursor:pointer;
        text-decoration:none;
    }
    #container{
        background-color:#eae9e9;
        border-radius:16px;
        padding:16px;
    }
    #logo{
        margin-bottom:24px;
        width:270px;
    }
    #header{
        background-color:#fff;
        padding:16px;
        position:relative;
    }
    #header-title{
        font-size:20px;
        font-weight:900;
        margin:0;
        width:260px;
    }
    #header-image{
        bottom:0;
        box-shadow:-5px 3px 35px rgba(0,0,0,0.75);
        height:240px;
        position:absolute;
        right:-23%;
        transform:rotate(5deg);
        width:360px;
    }
    p{
        font-weight:300;
        line-height:1.25;
    }
    #container-text{
        font-size:15px;
        margin:16px 0;
        text-align:center;
    }
    #container-title{
        background-color:#144379;
        color:#fff;
        font-size:16px;
        font-weight:500;
        margin:0;
        margin-left:-16px;
        text-align:center;
        text-transform:uppercase;
        padding:8px 16px;
        width:100%;
    }
    #products{
        margin-left:-16px;
        position:relative;
        width:calc(100%   32px);
        z-index:999;
    }
    #container-footer{
        font-size:18px;
        padding:0 24px;
        text-align:center;
    }
    #container-footer strong{
        display:block;
    }
    #footer{
        margin-left:-20px;
        margin-top:16px;
        padding-bottom:32px;
        overflow:hidden;
        position:relative;
    }
    #footer-image{
        bottom:-25%;
        left:-18%;
        position:absolute;
        width:394.4px;
        height:319.2px;
    }
    #footer-container{
        background-color:#144379;
        border-radius:24px;
        margin-left:auto;
        padding:16px;
        width:52%;
    }
    #footer-button{
        background:linear-gradient(180deg,#eff4f6 5%,#87b0bf,#87b0bf 80%);
        border-radius:999px;
        color:inherit;
        display:block;
        font-size:19px;
        font-weight:600;
        padding:8px 16px;
        text-align:center;
        text-transform:uppercase;
    }
    #footer-list{
        color:rgba(255,255,255,0.875);
        font-weight:300;
        font-size:14px;
        line-height:1.5;
        list-style:none;
        margin:0;
        margin-top:16px;
        padding:0;
        text-align:center;
    }
    #footer-link{
        background-color:#144379;
        color:#fff;
        display:block;
        font-size:14px;
        font-weight:600;
        margin-bottom:-20px;
        margin-left:-20px;
        padding:8px;
        text-align:center;
        text-decoration:none;
        width:calc(100%   24px);
    }
    .section-title{
        font-size:14px;
        font-weight:700;
        margin:0;
    }
    #section{
        display:flex;
        margin:auto;
        margin-bottom:16px;
        margin-top:6px;
        text-align:center;
        width:520px;
    }
    #section .border-triangle{
        border-color:transparent transparent #fff;
        border-style:solid;
        border-width:0 0 146px 30px;
        height:0;
        width:0;
    }
    #section .border-triangle ~ .border-triangle{
        border-color:#fff transparent transparent;
        border-width:146px 30px 0 0;
    }
    #section #section-container{
        background-color:#fff;
        display:flex;
        flex-grow:1;
        padding:16px 0;
    }
    #section .section-title{
        margin-bottom:4px;
    }
    #section-separator{
        border:2px solid #144379;
        border-bottom:none;
        border-top:none;
        padding:0 12px;
        width:72%;
    }
    #section ul{
        color:#777;
        display:flex;
        font-size:14px;
        font-weight:300;
        flex-wrap:wrap;
        justify-content:center;
        list-style:none;
        margin:0;
        margin-bottom:8px;
        padding:0;
    }
    #section ul li{
        margin-right:6px;
    }
    #section .bullet{
        color:#144379;
    }
    #container-text{
        font-size:18px;
        padding:0 44px;
    }
    #header-title{
        width:300px;
    }
    #header-image{
        right:-29%;
    }
    @media only screen and (max-width: 640px) 

</style></head>
  

Я уже использовал встроенный css, и это не помогло