Media Queries in Template -> scaling images fails

Hey guys,
I created a template, using the CampainMonitor builder and added Media Queries afterwards. Testing the html file in Google Chrome works fine, but when testing the template in your dashboard, the header image's size is stretched out of the original proportions. Do you have an idea why?

This is the media query (class w640 is the header image):

@media only screen and (min-width: 480px) and (max-width: 599px) { 
    table[class=w0], td[class=w0] { width: 0 !important; }
    table[class=w15], td[class=w15], img[class=w15] { width:5px !important; }
    table[class=w30], td[class=w30], img[class=w30] { width:10px !important; }
    table[class=w125], td[class=w125] { width:80px !important; }
    img[class=w125] { display:none !important; }
    table[class=w255], td[class=w255], img[class=w255] { width:180px !important; }
    table[class=w325], td[class=w325], img[class=w325] { width:260px !important; }
    table[class=w580], td[class=w580], img[class=w580] { width:440px !important; }
    table[class=w640], td[class=w640], img[class=w640] { width:460px !important; }
    table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] { display:none !important; }
    table[class=h0], td[class=h0] { height: 0 !important; }
    p[class=footer-content-left] { text-align: center !important; }
    #headline p { font-size: 22px !important; }
    }


And here's the header html code:

<td id="header" class="w640" width="640" align="center" bgcolor="#499ce2">
  <div align="center" style="text-align: center">
    <a href="http://lordsandknights.com/">
      <img id="customHeaderImage" label="Header Image" editable="true" src="Banner_640x200.jpg" class="w640" width="640" border="0" align="top" style="display: inline">
    </a>
  </div>
</td>
roshodgekiss roshodgekiss, 3 years ago

Hi there Xy-Olli, I couldn't reproduce this issue using this code, so I took a look at the campaign in your account and noticed the following:

@media only screen and (min-width: 800px) { 
...
    table[class=w640], td[class=w640], img[class=w640] { width:780px !important; }
...
    }

In wider viewports (like a browser window), this will cause the image to extend from its default 640px width to 780px. I noticed though that the aspect ratio hasn't been retained, so your best bet is to add height: auto; like so:

@media only screen and (min-width: 800px) { 
...
    table[class=w640], td[class=w640], img[class=w640] { width:780px !important; }
        img[class=w640] { height: auto !important; }
...
    }

Thanks, Xy-Olli! Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Xy-Olli, 3 years ago

Hi Rosanne,
thanks for your help. Unfortunately your advice doesn't solve the issue. The image still is stretched :-(
This is how it looks like:
https://www.dropbox.com/s/k3y7w1epnrjgkm1/Bildschirmfoto%202013-05-27%20um%2010.21.03.png

Do you have another idea?

Thanks,
Best,
Olli

roshodgekiss roshodgekiss, 3 years ago

Hi there Olli, to maintain the correct aspect ratio, you can try:

@media only screen and (min-width: 800px) { 
...
    table[class=w640], td[class=w640], img[class=w640] { width:780px !important; }
        img[class=w640] { height: 244px !important; }
...
    }

Just make sure you don't set this height to cells, too. Hopefully you'll have better luck now :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Xy-Olli, 3 years ago

Hey Rosanne,
unfortunately this doesn't solve the problem neither.
I'm a little confused, because when testing the template in my browser image-scaling works fine. The Problem only appears when previewing the template in your dashboard. Is it possible that your system causes the problem?!

Best,
Oliver

roshodgekiss roshodgekiss, 3 years ago

Hi Oliver, no worries. I created a new template in your account, "Test 01 - CM Edit", tweaked the media query and the editable header image - now, the header seems to be resizing correctly. You'll see these changes in the code:

Line 18: img[class=w640] { height:auto !important; }
Line 234:
<div align="center" style="text-align: center">
   <img editable id="customHeaderImage" src="banner_640x200.jpg" class="w640" width="640" border="0" align="top" style="display: inline;">
</div>

You'll see that I stripped out the <a href=""> around the editable image - this is redundant, as you add the URL link via the email editor.

Thanks, Oliver! Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Xy-Olli, 3 years ago

Hey Rosanne,
looks great, thanks a lot. Could you also do the fix for the 3rd query:

@media only screen and (min-width: 480px) and (max-width: 599px)

This one also scales incorrectly.

Best,
Oliver

roshodgekiss roshodgekiss, 3 years ago

Hi Oliver, as much as we're always very happy to make fixes, we'd like to really encourage you to take a look at the template code and understand how it works. There are a lot of resources on the web to help you work with media queries, including our Guide to Responsive Email Design and naturally, we're happy to help with any questions you may have.

Thanks for your understanding here - we know you have what it takes! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098