Столбки макета SFMC не укладываются в Gmail IOS ⇐ Html

[Anonymous]

Я работал над некоторыми столбцами с укладками в построении электронной почты в SFMC Content Builder и попадал в стену, когда дело доходит до мобильного представления. Я использовал макеты SFMC для создания столбцов и установить их на стек. В частности, на Gmail ios, это было очень забавно. Есть мысли? SFMC Madeouts имеет кнопку, которую вы можете проверить, чтобы это произошло, и она работает для любого другого предварительного просмотра ESP, она просто не работает с Gmail iOS. > < /p>

















Run/Walk
Series







Rate Field Chicago, IL







May 18, 2025









Register Now








column 2:















css:




THE MICHAEL J. FOX FOUNDATION









@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');




:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
body {
margin: 0 auto;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 !important;
outline: none !important;
width: 100%;
Height: auto;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
table {
border-collapse: collapse;
table-layout: fixed;
mso-table-lspace: 0px;
mso-table-rspace: 0px;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
.defaultlink_ia a {
color: inherit;
text-decoration: none;
}
.defaultlink1_ia a {
color: inherit;
text-decoration: underline;
}
.g_img_ia + div {
display: none;
}

a[x-apple-data-detectors], u + .body_ia a, #MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
@media only screen and (max-width:649px) {

.main_table_ia {
width: 481px !important;
}
.wrapper_ia {
width: 100% !important;
}
.hide_ia {
display: none !important;
}
.text_align_left {
text-align: left !important;
}
.text_align_left span {
text-align: left !important;
}
.pbottom0_ia {
padding-bottom: 0px !important;
}
.full_img_ia img {
max-width: 100% !important;
height: auto !important;
}

.center_ia {
text-align: center !important;
}
.pt10_ia {
padding-top: 10px !important;
}
.h20_ia {
height: 20px !important;
font-size: 1px!important;
line-height: 1px!important;
}
.h30_ia {
height: 44px !important;
}
.mob_block_ia {
display: block !important;
}
.hauto_ia {
height: auto !important;
}
.clear_ia {
clear: both !important;
width: 100% !important;
display: block !important;
}
u + .body_ia .full_wrap_ia {
width: 100% !important;
width: 100vw !important;
display:block !important;
}

.cta_ia {
font-size: 12px !important;
padding: 0px 35px !important;
height: 40px !important;
}
.ctaa_ia {
line-height: 40px !important;
}
.ctaa2_ia {
line-height: 17px !important;
}
.bgh_ia {
height: 125px !important;
}
.f24_ia {
font-size: 18px !important;
line-height: 25px !important;
}
.f13_ia {
font-size: 15px !important;
line-height: 30px !important;
}
.border_ia {
border-bottom: 2px #e3e3e3 solid !important;
}
.bg1_h_ia {
height: 133px !important;
}
.pl10_ia {
padding-left: 15px !important;
}
.hide_desktop_ia {
display: table!important;
float: none!important;
width: 100%!important;
overflow: visible!important;
height: auto!important;
}
.bg3_h_ia {
height: 145px !important;
}
.bg2_h_ia {
height: 220px !important;
}
.f26_ia {
font-size: 24px !important;
line-height: 30px !important;
letter-spacing: 0px !important;
}
.f18_ia {
font-size: 17px !important;
line-height: 26px !important;
}
.cta_f14_ia {
font-size: 14px !important;
}
.logo_ia img {
width: 218px !important;
height: auto !important;
}
.middle_ia {
vertical-align: middle !important;
}
.side35_ia {
width: 35px !important;
}
.box_shadow_ia {
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25)!important;
}
.bg4_h_ia {
height: 188px !important;
}
.bg5_h_ia {
height: 175px !important;
}
.bg6_h_ia {
height: 150px !important;
}
/* New Classes Defined */
.ptop30_ia {
padding-top: 30px !important;
}
.ptop34_ia {
padding-top: 34px !important;
}
.ptop35_ia {
padding-top: 36px !important;
}
.pb30_ia {
padding-bottom: 30px !important;
}
.pb36_ia {
padding-bottom: 36px !important;
}
.pb42_ia {
padding-bottom: 42px !important;
}
.pb62_ia {
padding-bottom: 62px !important;
}
.pt0_36B_ia {
padding: 0px 35px 36px 35px !important;
}
.pt0_62B_ia {
padding: 0px 35px 62px 35px !important;
}
.pt36_0B_ia {
padding: 36px 35px 0px 35px !important;
}
.pt36_36B_ia {
padding: 36px 35px 36px 35px !important;
}
.p36_62B_ia {
padding: 36px 35px 62px 35px !important;
}
.pt0_0B_ia { padding: 0px 35px 0px 35px !important; }
.bg7_h_ia {
height: 230px !important;
}

.responsive-td, .stack { display: block !important;
width: 100% !important; }

.responsive-cta { text-align: center; overflow: hidden;}

.logo-stack {
max-width: 100% !important; padding-right: 20px; padding-left: 20px; }

@media screen and (max-width: 480px) {

.main_table_ia {
width: 375px !important;
}
.h30_ia {
height: 21px !important;
}
.cta_ia {
font-size: 13px !important;
padding: 0px 35px !important;
height: 40px !important;
}
.bgh_ia {
height: 101px !important;
}
.f24_ia {
font-size: 16px !important;
line-height: 22px !important;
}
.f10_ia {
font-size: 12px !important;
line-height: 24px !important;
}
.f11_ia {
font-size: 14px !important;
line-height: 26px !important;
}
.f13_ia {
font-size: 14px !important;
line-height: 28px !important;
}
.f35_ia {
font-size: 28px !important;
line-height: normal !important;
}
.bg1_h_ia {
height: 100px !important;
}
.bg3_h_ia {
height: 110px !important;
}
.font28_ia {
font-size: 26px !important;
line-height: 30px !important;
}
.bg2_h_ia {
height: 182px !important;
}
.f26_ia {
font-size: 18px !important;
line-height: 25px !important;
letter-spacing: 0px !important;
}
.logo_ia img {
width: 165px !important;
height: auto !important;
}
.bg4_h_ia {
height: 141px !important;
}
.bg5_h_ia {
height: 133px !important;
}
.bg6_h_ia {
height: 115px !important;
}
.bg7_h_ia {
height: 170px !important;
}
}
@media screen and (max-width: 374px) {

.main_table_ia {
width: 320px !important;
}
.h30_ia {
height: 17px !important;
}
.bgh_ia {
height: 90px !important;
}
.f24_ia {
font-size: 15px !important;
line-height: 18px !important;
}
.f10_ia {
font-size: 10px !important;
line-height: 24px !important;
}
.f11_ia {
font-size: 12px !important;
line-height: 24px !important;
}
.f13_ia {
font-size: 13px !important;
line-height: 24px !important;
}
.cta_ia {
font-size: 12px !important;
padding: 0px 20px !important;
height: 40px !important;
}
.f35_ia {
font-size: 25px !important;
line-height: normal !important;
}
.ctaa_ia {
line-height: 40px !important;
}
.ctaa2_ia {
line-height: 17px !important;
}
.bg1_h_ia {
height: 86px !important;
}
.bg3_h_ia {
height: 92px !important;
}
.font28_ia {
font-size: 22px !important;
line-height: 26px !important;
}
.fontx1_ia {
font-size: 14px !important;
}
.bg2_h_ia {
height: 167px !important;
}
.f26_ia {
font-size: 16px !important;
line-height: 20px !important;
letter-spacing: 0px !important;
}
.f18_ia {
font-size: 14px !important;
line-height: 25px !important;
}
.logo_ia img {
width: 137px !important;
height: auto !important;
}
.bg4_h_ia {
height: 122px !important;
}
.bg5_h_ia {
height: 115px !important;
}
.bg6_h_ia {
height: 97px !important;
}
.bg7_h_ia {
height: 135px !important;
}
}
@media screen and (prefers-color-scheme:dark) {
.body_ia {
background-color: #000000 !important;
color: #ffffff !important;
}
.full_wrap_ia {
background-color: #000000 !important;
color: #ffffff !important;
}
.main_table_ia {
background-color: #000000 !important;
color: #ffffff !important;
}
.dark_ia {
background-color: #000000 !important;
color: #ffffff !important;
}
.dark1_ia {
background-color: #391900 !important;
color: #ffffff !important;
}
.txt_white_ia {
color: #FFFFFF !important;
}
}




Подробнее здесь: https://stackoverflow.com/questions/794 ... -gmail-ios