Hi - how does one reduce/stabilize logo size on mobile?
I have found discussions with these CSS parameters, but they are not working. Other question is where in the table (below) would this be functional? Thanks!
@media screen and (max-device-width: "400") {
* { font-family: sans-serif }
.mobile_content {display: block} !important
.nonmobile_content {display: none} !important
}
OR
@media only screen and (max-width: "400") {
.logo-image .logo {
height: "100";
}
}
<!-- LOGO here -->
<table class="respond" align="center" cellpadding="0" cellspacing="0" border="0" style="mso-table-rspace:0pt; mso-table-lspace:0pt; border-collapse:collapse; width:400px; margin-left:auto; margin-right:auto; vertical-align:top; " ><tr ><td align="center" valign="top" ><div class="mkteditable" id="Logo" style="margin:0; padding:0; " ><p><a href="https://www.link.com" target="_blank" style="text-decoration: none; cursor: pointer; color: #000000;"></a><br></p>
<p><a href="https://www.link.com" target="_blank" style="text-decoration: none; cursor: pointer; color: #000000;"><img src="http://go.image-logo-1.png" width="120" height="29" constrain="true" imagepreview="false"><img src="http://go.image-logo-84x32%402x.png" alt="Image" style="display: block; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 84px; max-height: 32px; min-width: 84px; min-height: 32px;" border="0" width="84" height="32"></a></p>
</div>
</td>
</tr>
</table>
<!-- Icon image here -->
<table class="respond" align="center" cellpadding="0" cellspacing="0" border="0" style="mso-table-rspace:0pt; mso-table-lspace:0pt; border-collapse:collapse; width:400px; margin-left:auto; margin-right:auto; vertical-align:top; " ><tr ><td align="center" valign="top" ><div class="mkteditable" id="Icon" style="margin:0; padding:0; " ></div>
</td>
</tr>
</table>
Responsible email dev is a tricky discipline. Search the internet for fluid / responsive email dev or consider buying a template from a vendor..png)