Logo Size on Mobile

Ahou_Tabibsadeh
Level 1

Logo Size on Mobile

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>

3 REPLIES 3
Grégoire_Miche2
Level 10

Re: Logo Size on Mobile

Hi Ahou,

Please be aware that media queries only work on certain mobiles devices (mostly Apple) but not on others.

-Greg

Ahou_Tabibsadeh
Level 1

Re: Logo Size on Mobile

Thanks Gregoire - makes sense. The logo widens significantly on iphone and I haven't encountered this to date.

Is there a way to consistently stabilize image size across various devices?

Grégoire_Miche2
Level 10

Re: Logo Size on Mobile

Unfortunately, none that I could explain over a community post Responsible email dev is a tricky discipline. Search the internet for fluid / responsive email dev or consider buying a template from a vendor.

-Greg