getting tables to behave on mobile
This commit is contained in:
@@ -44,7 +44,6 @@ img {
|
||||
text-decoration:none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
float: left;
|
||||
clear: both;
|
||||
display: block;
|
||||
@@ -583,8 +582,7 @@ body.outlook p {
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
table[class="body"] img {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
|
||||
}
|
||||
|
||||
table[class="body"] center {
|
||||
|
||||
@@ -102,6 +102,10 @@ margin-bottom: 25px;
|
||||
table[class="body"] .left-text-pad {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
table.better-button {
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<tr>
|
||||
<td class="last">
|
||||
<center>
|
||||
<table class="twelve columns" >
|
||||
<table class="twelve" style="width: 340px;" >
|
||||
<tr>
|
||||
<td class="six last">
|
||||
<h5 style="font-weight: bold;">Metric name</h5>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<td class="column last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; hyphens: auto; line-height: 19px; margin: 0; padding: 10px 0px 0px; position: relative; text-align: left; vertical-align: top; word-break: break-word" align="left" valign="top">
|
||||
<center style="min-width: 580px; width: 100%">
|
||||
|
||||
<table class="twelve columns" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 580px">
|
||||
<table class="twelve" style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; padding: 0; text-align: left; vertical-align: top; width: 340px">
|
||||
<tr style="padding: 0; text-align: left; vertical-align: top" align="left">
|
||||
<td class="six last" style="-moz-hyphens: auto; -webkit-font-smoothing: antialiased; -webkit-hyphens: auto; -webkit-text-size-adjust: none; border-collapse: collapse !important; color: #222222; font-family: 'Open Sans', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 1.3; margin: 0; padding: 0; word-break: normal;" align="left" valign="top">
|
||||
Metric name
|
||||
|
||||
@@ -108,7 +108,7 @@ td[class="stack-column-center"] {
|
||||
<table class="twelve columns">
|
||||
<tr>
|
||||
<td class="six sub-columns center">
|
||||
<img src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="width: 200px; float: none; display: inline">
|
||||
<img class="logo" src="http://grafana.org/assets/img/logo_new_transparent_200x48.png" style="width: 200px; float: none; display: inline">
|
||||
</td>
|
||||
<td class="expander"></td>
|
||||
</tr>
|
||||
@@ -128,7 +128,7 @@ td[class="stack-column-center"] {
|
||||
<td height="2" class="spacer mb-shorten" style="font-size: 0; line-height: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; border: 0; background: linear-gradient(to right, #ffed00 0%, #f26529 75%); height: 2px !important" valign="top"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="mini-centered-text" style="color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 75px; text-align: center; vertical-align: top" align="center" valign="top">
|
||||
<td class="mini-centered-text" style="color: #343b41; font: 400 16px/27px 'Helvetica Neue', Helvetica, Arial, sans-serif; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 25px 35px; text-align: center; vertical-align: top" align="center" valign="top">
|
||||
{{> body }}
|
||||
<!-- container end below -->
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user