0
모바일 장치에 두 개의 열을 쌓을 수있는 반응 형 전자 메일을 작성하는 방법을 알아 내려고했지만 계속 문제가 있습니다. 열을 모바일에서 스택으로 가져 오면 두 열을 나란히 놓는 대신 데스크톱 전자 메일 클라이언트에 스택하는 경향이 있습니다. 데스크톱에서 열을 나란히 놓으면 모바일에 바로 스택되지 않습니다. 한 가지 문제가 해결되면 다른 문제가 발생합니다. 누군가가 내 코드를보고 놓친 것이 있는지 확인할 수 있습니까? 대단히 감사하겠습니다! 그건 그렇고, 내 CSS 파일로 ZURB에서 기반을 사용하고 있습니다 : http://foundation.zurb.com반응 형 스태킹 열 문제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="%%subject%%" />
<title></title>
<link rel="stylesheet" href="foundation.css" />
</head>
<body bgcolor="#f0f1f2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; background-color: #f0f1f2; margin: 0; padding: 0;">
<style type="text/css">
#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;
}
}
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" width="100%">
<tbody>
<!-- BEGIN PREHEADER // -->
<tr>
<td align="center" id="preheaderCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; margin: 0; padding: 20px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; width: 600px; ">
<tbody>
<!-- <tr>
<td pardot-region="preheader_content01" align="center" class="preheaderContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #808080; font-family: Helvetica; font-size: 10px; line-height: 12.5px; text-align: center; " valign="top" width="180">
Email not displaying correctly?
<a href="%%view_online%%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #606060; font-weight: normal; text-decoration: underline;" target="_blank">View it in your browser</a>.
</td>
</tr> -->
</tbody>
</table>
</td>
</tr>
<!-- // END PREHEADER -->
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; margin: 0; padding:0 20px 20px;" valign="top">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: separate !important; width: 600px; -moz-box-shadow: 0px 0px 10px #ccc; -webkit-box-shadow: 0px 0px 10px #ccc; box-shadow: 0px 0px 10px #ccc;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width:100%!important;" width="100%">
<tbody><tr>
<td bgcolor="#3f7f80" align="left" class="headerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; font-family: Helvetica; font-size: 20px; font-weight: bold; line-height: 20px; text-align: left; vertical-align: middle; padding: 16px;" valign="top" pardot-region="header_image"></td>
</tr>
</tbody></table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 20px 0;" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody><tr>
<td pardot-region="body_content" align="left" class="bodyContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #3f4040; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; line-height: 21px; text-align: left; padding:25px 0 25px;" valign="top">
<h3 style="color: #000000 !important; display: block; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; font-weight: Bold; letter-spacing: normal; line-height: 16px; margin: 0; padding-bottom:15px; text-align: left">Hi, <%First%></h3>
<h1 style="color: #000000 !important; display: block; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 26px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 26px; margin: 0; padding-bottom:15px; text-align: left">TITLE</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<br>
</td>
</tr>
<tr>
<td pardot-region="body_content" align="center" class="bodyContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #3f4040; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; line-height: 21px; text-align: center; padding:0px 0 0px; valign="top">
<div class="row">
<div class="large-6 medium-6 columns">
<br>
<div>
<b>dsafhjl dsfhajlk hj hjk hjkds hdfskj:</b><br>
hdlkjs hfkjlsdhflkjs dhfkjld shkljfhkla jsh dkljs hfklj dsah kjhfaklj hdflkj shaflk jdshfkjlh sadlfhjlsdakhjf
</div>
</div>
<div class="large-6 medium-6 columns">
<div>
<img src="xxx" alt="" border="0" width="283px" height="180px">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img height="25px" src="x" alt="">
</td>
</tr>
<tr>
<td style="text-align: left;">
<span class="note" style="font-family: Helvetica Neue, Helvetica, sans-serif; font-weight: 200; color: #7e7f80; font-size: 12px; line-height: 14px;"><i>djskhfk dshkjlfh dshfalkj fhdjsl</i></span><br><br>
</td>
</tr>
</tbody></table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width:100%!important;" width="100%">
<tbody><tr>
<td bgcolor="#3f7f80" align="left" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 20px; font-weight: bold; line-height: 10px; text-align: left; vertical-align: middle;" valign="top" pardot-region="header_image"> </td>
</tr>
</tbody></table>
<!-- // END HEADER -->
</td>
</tr>
</tbody></table>
<!-- // END TEMPLATE -->
</td>
</tr>
</tbody></table><br>
사람? 코드 줄이기, 예제 만들기 – scooterlord