fix(ink): add .email-sidebar class for vertical stacking on mobile
Quick Info sidebar now stacks below main content at <=480px viewports via CSS class instead of fragile inline styles. - Added .email-sidebar base style (extracted from inline styles) - Added responsive rule: width:100%, display:block, removes left border, adds top border separator when stacked vertically - All 11 ink templates updated consistently Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
1 parent
f85520a808
commit
f2a3c0f033
11 files changed
+33
-11
No files matched your search
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -115,7 +117,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -55,6 +56,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -111,7 +113,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -103,7 +105,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -109,7 +111,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -63,6 +64,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -181,7 +183,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -58,6 +59,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -130,7 +132,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -104,7 +106,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -109,7 +111,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -109,7 +111,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -113,7 +115,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
@@ -21,6 +21,7 @@
|
|||||||
|
|
||||||
/* Card */
|
/* Card */
|
||||||
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
.email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
|
||||||
|
.email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
|
||||||
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
.email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
|
||||||
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
.email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
|
||||||
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
.email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
|
||||||
@@ -53,6 +54,7 @@
|
|||||||
@media only screen and (max-width:480px) {
|
@media only screen and (max-width:480px) {
|
||||||
.email-header { padding-left:16px!important;padding-right:16px!important }
|
.email-header { padding-left:16px!important;padding-right:16px!important }
|
||||||
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
.email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
|
||||||
|
.email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
|
||||||
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
.email-btn { display:block!important;width:auto!important;text-align:center!important }
|
||||||
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
.email-footer { padding-left:16px!important;padding-right:16px!important }
|
||||||
}
|
}
|
||||||
@@ -109,7 +111,7 @@
|
|||||||
|
|
||||||
</td>
|
</td>
|
||||||
<!-- right column / sidebar -->
|
<!-- right column / sidebar -->
|
||||||
<td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
|
<td width="36%" class="email-sidebar">
|
||||||
|
|
||||||
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
<p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
|
||||||
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
|
||||||
|
|||||||
Reference in new issue
Block a user