I used a free html Generator. The preview is perfect. When I insert it to the Email, the Pictures get disorted.
This is my Code:
<title>
body {
margin: 0;
padding: 0;
}
table,
td,
tr {
vertical-align: top;
border-collapse: collapse;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors=true] {
color: inherit !important;
text-decoration: none !important;
}
@media (max-width: 920px) {
.block-grid,
.col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}
.block-grid {
width: 100% !important;
}
.col {
width: 100% !important;
}
.col>div {
margin: 0 auto;
}
img.fullwidth,
img.fullwidthOnMobile {
max-width: 100% !important;
}
.no-stack .col {
min-width: 0 !important;
display: table-cell !important;
}
.no-stack.two-up .col {
width: 50% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num8 {
width: 66% !important;
}
.no-stack .col.num4 {
width: 33% !important;
}
.no-stack .col.num3 {
width: 25% !important;
}
.no-stack .col.num6 {
width: 50% !important;
}
.no-stack .col.num9 {
width: 75% !important;
}
.video-block {
max-width: none !important;
}
.mobile_hide {
min-height: 0px;
max-height: 0px;
max-width: 0px;
display: none;
overflow: hidden;
font-size: 0px;
}
.desktop_hide {
display: block !important;
max-height: none !important;
}
}
<table cellpadding="0" cellspacing="0" class="nl-container" style="table-layout: fixed; vertical-align: top; min-width: 320px; margin: 0 auto; background-color: rgba(245, 245, 245, 1); width: 100%" valign="top" width="100%"><tbody><tr style="vertical-align: top" valign="top"><td style="vertical-align: top" valign="top"><div style="background-color: rgba(0, 0, 0, 0)">
<div class="block-grid" style="margin: 0 auto; min-width: 320px; max-width: 900px; background-color: rgba(0, 0, 0, 0)">
<div style="width: 100%; background-color: rgba(0, 0, 0, 0)">
<div class="col num12" style="min-width: 320px; max-width: 900px; vertical-align: top; width: 900px">
<div style="width: 100% !important">
<div style="padding: 5px 0">
<table border="0" cellpadding="0" cellspacing="0" class="divider" style="table-layout: fixed; vertical-align: top; min-width: 100%" valign="top" width="100%"><tbody><tr style="vertical-align: top" valign="top"><td class="divider_inner" style="vertical-align: top; min-width: 100%; padding: 10px" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" class="divider_content" height="10" style="table-layout: fixed; vertical-align: top; height: 10px; width: 100%" valign="top" width="100%"><tbody><tr style="vertical-align: top" valign="top"><td height="10" style="vertical-align: top" valign="top"><span></span></td></tr></tbody></table>
</td></tr></tbody></table>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="background-color: rgba(0, 0, 0, 0)">
<div class="block-grid two-up no-stack" style="margin: 0 auto; min-width: 320px; max-width: 900px; background-color: rgba(255, 255, 255, 1)">
<div style="width: 100%; background-color: rgba(255, 255, 255, 1)">
<div class="col num6" style="min-width: 320px; max-width: 450px; vertical-align: top; width: 450px">
<div style="width: 100% !important">
<div style="padding: 25px 0 25px 25px">
<div align="left" class="img-container left fullwidthOnMobile autowidth" style="padding-right: 0; padding-left: 0">
</div>
</div>
</div>
</div>
<div class="col num6" style="min-width: 320px; max-width: 450px; vertical-align: top; width: 450px">
<div style="width: 100% !important">
<div style="padding: 25px 25px 25px 0">
<div align="right" class="img-container right autowidth" style="padding-right: 0; padding-left: 0">
</div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="background-color: rgba(0, 0, 0, 0)">
<div class="block-grid" style="margin: 0 auto; min-width: 320px; max-width: 900px; background-color: rgba(214, 231, 240, 1)">
<div style="width: 100%; background-color: rgba(214, 231, 240, 1)">
<div class="col num12" style="min-width: 320px; max-width: 900px; vertical-align: top; width: 900px">
<div style="width: 100% !important">
<div style="padding: 5px">
<div align="center" class="img-container center fixedwidth" style="padding-right: 0; padding-left: 0">
<div style="font-size: 1px; line-height: 45px">Â </div>
</div>
<div style="color: rgba(5, 45, 61, 1); font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; line-height: 1.5; padding: 20px 10px 0 15px">
<div style="font-size: 12px; line-height: 1.5; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: rgba(5, 45, 61, 1)">
<p style="font-size: 50px; line-height: 1.5; text-align: center; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin: 0"><span style="font-size: 50px"><strong><span style="font-size: 50px"><span style="font-size: 38px">Herzlich willkommen bei uns!</span></span></strong></span></p>
<p style="font-size: 34px; line-height: 1.5; text-align: center; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; margin: 0"><span style="font-size: 34px"><strong><span style="font-size: 34px"><span style="color: rgba(33, 144, 227, 1); font-size: 34px">*Vorname Name*</span></span></strong></span></p>
</div>
</div>
What I have tried:
nothing, not an expert. May someone help me? Thank you