I did not code this email. It's a legacy mailer that needs to be updated because it has stopped displaying the mobile stacking version on mobile devices and is instead displaying the desktop side by side version. If you view online version on your mobile it will open with the correct mobile display. This only happens in Gmail App all other mobile apps display correctly.
Please help!
96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
@media screen and (max-width: 599px) { .laybytable1 { display:block!important; width:300px!important; height:265px!important; } .laybytable2 { display:block!important; width:300px!important; height:265px!important; } } .preheader { display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0; } img{ height:auto; } body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } a { color: #000; } a:hover { color: #1079bf; } table { border-spacing: 0; } table td { border-collapse: collapse; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .columns-container { width: 100% } .column-image { width: 100%; } @media only screen and (max-width: 600px) { *[class="hide"] { display: none !important; } *[class="center"] { text-align: center !important; width: 100% !important; height: auto !important; } table[class="container"] { width: 100% !important; } table[class="col-2"] { float: none !important; width: 100% !important; padding-bottom: 10px; } table[class="col-3"] { float: none !important; width: 100% !important; margin-bottom: 12px; padding-bottom: 10px; } table[class="col-4"] { float: left !important; width: 50% !important; margin-bottom: 12px; //padding-bottom: 10px; border: 1px solid #707070 !important; } table[id="last-col-3"], table[id="last-col-4"] { border-bottom: 0; margin-bottom: 0; } td[class="force-col"] { display: block; padding-right: 0 !important; } td[class="logo"] { display: block; padding-right: 0 !important; width: 100%; text-align: center; float: center; } td[class="header-col"] { display: block; padding: 20px !important; width: 100%; text-align: right; float: right; } td[class="header-col-instore"] { text-align: left; display: block; padding: 0 !important; } td[class="mobile-padding"] { padding: 0px !important; } td[class="align-center"] { text-align: center !important; } div[class="mobile-remove-padding"] { padding: 0 !important; } .mobile-remove-padding { padding: 0 !important; } img[class="banner-img"] { width: 100%; } img[class="hide"] { display: none; } img[class="center"] { max-width: 180px; display: block; margin-left: auto; margin-right: auto; } img[class="col-2"] { float: none !important; width: 100% !important; padding-bottom: 0; } hr[class="hide"] { display: none; } span[class="fullwidth-mobile"] { width: 100%; } .remove-mobile { padding: 0 !important; } .mobile-full { width: 100% !important; display: block; } .mobile-padding-top { padding-top: 15px !important; } .text-mobile-padding-left { padding: 0px 20px 0px !important; }
.red-block {
padding-left: 15px !important;
padding-right: 15px !important;
}
.mobile-margin-bottom {
margin-bottom: 20px;
}
.mobile-block {
padding-left: 20px !important;
padding-right: 20px !important;
}
.grey-block {
padding: 40px 20px !important;
}
.footer-social-buttons {
width: 89%;
margin-left: auto;
margin-right: auto;
}
.last-menu-item {
display: inline-block;
margin-top: 14px;
}
.mobile-margin {
margin-left: 12px;
margin-right: 12px;
}
.mobile-remove-margin-top {
margin-top: 0 !important;
}
.grey-bar-right-padding {
padding-right: 12px !important;
}
.grey-bar-left-padding {
padding-left: 12px !important;
}
.remove-mobile-padding-top {
padding-top: 0 !important;
}
.column,
.column-top { float: left !important; width: 100% !important; display: block !important; }
}
@media screen and (max-width: 480px) {
table[class="col-2"] {
float: none !important;
width: 100% !important;
padding-bottom: 10px;
text-align: center !important;
}
table[class="social-footer"] p {
width: 100%;
}
td[class="left"] {
text-align: center !important;
padding: 0;
}
td[class="right"] {
text-align: center !important;
padding: 0;
}
td[class="container-padding"] {
padding-left: 12px !important;
padding-right: 12px !important;
}
span[class="mobile-line-break"] {
display: block;
}
img[class="col-2"] {
float: none !important;
width: 100% !important;
max-width: 100% !important;
padding-bottom: 10px;
text-align: center !important;
}
.last-menu-item {
display: inline-block;
margin-top: 14px;
}
td[class="header-col"] p {
font-size: 11px;
}
.copy {
width: 260px;
}
.mobile-font-size {
font-size: 13px !important;
}
.mobile-image-padding {
padding-left: 12px !important;
padding-right: 12px !important;
}
.mobile-align-left {
text-align: left;
}
.mobile-display-none {
display: none;
}
} @media screen and (max-width: 320px) { .footer-logos { width: 290px; }
}
</style>
Opening text goes here.
%%DC::DCLOGO::DCLOGO%% Hi %%TITLE%% %%SURNAME%%,Please find your Layby Statement as at %%LAYBY_STATEMENT_DATE%%.
This is a combined summary of all current Laybys held at. LAYBY SUMMARY Customer Number: %%LAYBY_NO%% Layby Limit: %%CURRENCY%% %%LAYBY_LIMIT%% Total Outstanding Balance: %%CURRENCY%% %%LAYBY_BALANCE%% Amount you can Layby for: %%CURRENCY%% %%LAYBY_OTB%% PAYMENT OPTIONS The following payment methods are available: • Cash • Debit card • Credit card * Please note that Layby payments can only be made at the store where the Layby was initiated.
%%DC::DCLOGO::DCIMAGEANDLATESTLOOKS%%
Email: xxx | Tel: +27 21 xxx © Copyright 2019 xxx. All rights reserved.Head Office Address: xxx Head Office Number: +27 21 xxx Our Email Disclaimer is available online. Got forwarded this email from a friend? Subscribe to receive periodic news and updates from xxx. Unsubscribe