Ответные проблемы с столбцами ⇐ Html

[Anonymous]

Я пытался выяснить, как создать адаптивную электронную почту, в которой будут складываться два столбца на мобильном устройстве, но я продолжаю сталкиваться с проблемами. Если я заставляю столбцы складываться на мобильных устройствах, они также имеют тенденцию складываться на почтовых клиентах для настольных компьютеров, вместо того, чтобы быть двумя столбцами рядом. Если я возьму колонны рядом на рабочем столе, они не будут складываться прямо на мобильных устройствах. Кажется, что, как только я исправил одну вещь, другая вещь идет не так. Может ли кто -нибудь взглянуть на мой код, чтобы увидеть, есть ли что -то, что я пропустил? Это было бы очень оценено! Кстати, я использую Foundation от Zurb в качестве файла CSS: http://foundation.zurb.com















#outlook a {
padding: 0;
}
.body{
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
}
/* hide unsubscribe from forwards*/
blockquote .original-only, .WordSection1 .original-only {
display: none !important;
}

@media only screen and (max-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */

#preheaderCell{padding:10px !important;}

#bodyCell{padding:0 10px 0 !important;}

#footerCell{padding:20px 10px 0 !important;}

#templateContainer{
max-width:600px !important;
width:100% !important;
}

h1{
font-size:26px !important;
line-height:100% !important;
}

h2{
font-size:26px !important;
line-height:100% !important;
}

h3{
font-size:16px !important;
line-height:100% !important;
}

h4{
font-size:16px !important;
line-height:100% !important;
}

#headerImage{
height:auto !important;
max-width:600px !important;
width:100% !important;
}

.headerContent{
font-size:20px !important;
line-height:125% !important;
}

.bodyContent{
font-size:18px !important;
line-height:125% !important;
}

.footerContent{
font-size:14px !important;
line-height:115% !important;
}

.button{
width:30% !important;
}

.note{
font-size:14px !important;
line-height: 17px !important;
}

}












































Hi,

TITLE

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX






Подробнее здесь: https://stackoverflow.com/questions/275 ... umn-issues