@media query for newsletters!

HTML & CSS
1

Hi guys,

Just wondering where I need to put the @media queries to make my newsletter mobile-friendly. My newsletter looks OK on iphones and ipads but awful on android phones. I got the @media quote from campaign monitor and have placed it within the <style> tags, but the beginning of the code is bold and red as if it is incorrect.

Can you please help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- Facebook sharing information tags --><meta property="og:title" content="*|MC:SUBJECT|*">

<title>*|MC:SUBJECT|*</title>




















































































<style type="text/css">
		.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		.ExternalClass *{
			line-height:120%;
		}
		body{
			width:100%;
			background-color:#DDDDDD;
			padding:0;
			margin:0;
			-webkit-text-size-adjust:none;
		}
		span.yshortcuts{
			color:#000;
			background-color:none;
			border:none;
		}
		span.yshortcuts:hover,span.yshortcuts:active,span.yshortcuts:focus{
			color:#000;
			background-color:none;
			border:none;
		}
		.ReadMsgBody{
			width:100%;
		}
		.ExternalClass{
			width:100%;
		}
		body{
			width:100%;
			background-color:#DDDDDD;
			padding:0;
			margin:0;
			-webkit-text-size-adjust:none;
		}
		span.yshortcuts{
			color:#336699;
			background-color:none;
			border:none;
		}
		span.yshortcuts:hover,span.yshortcuts:active,span.yshortcuts:focus{
			color:#336699;
			background-color:none;
			border:none;
		}
		table{
			border-collapse:separate;
		}
		a,a:link,a:visited{
			text-decoration:none;
			color:#336699;
		}
		a:hover{
			text-decoration:underline;
		}
		h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht{
			color:#202020 !important;
		}
		p{
			margin-bottom:0;
		}
		.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td{
			line-height:100%;
		}
		
		
		
	@media only screen and (max-device-width: 480px) {
     body {
          padding: 10px !important;
     }
    .container {
          padding: 0px 10px 5px 10px !important;
     }
     .header {
          font-size: 16px !important;
     }
     .headline {
          font-size: 20px !important;
     }
     #screenshot_image {
          width: 275px;
          height: 190px;
     }
}	
		
		
		
		
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="width: 100%;background-color: #DDDDDD;-webkit-text-size-adjust: none;padding-bottom: 0;padding-left: 0;padding-right: 0;padding-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;margin-top: 0;padding: 0;margin: 0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%;background-color: #DDDDDD;padding: 0;margin: 0;-webkit-text-size-adjust: none;border-collapse: separate;"><tr><td>

     <center>
         <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="width: 100%;height: 100%;background-color: #DDDDDD;padding-bottom: 0;padding-left: 0;padding-right: 0;padding-top: 0;margin-bottom: 0;margin-left: 0;margin-right: 0;margin-top: 0;border-collapse: separate;"><tr>
<td align="center" valign="top" style="border-collapse:collapse;">

   <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader" style="background-color: #DDDDDD;border-collapse: separate;"><tr>
<td valign="top" class="preheaderContent" style="border-collapse:collapse;">

                                 <!-- // Begin Module: Standard Preheader  -->
                                    <table border="0" cellpadding="10" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;">
                                             <div mc:edit="std_preheader_content" style="text-align:left;mso-line-height-rule:exactly line-height:100%;font-size:10px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"></div>
                                            </td>
                                            <!-- *|IFNOT:ARCHIVE_PAGE|* -->
           <td valign="top" width="190" style="border-collapse:collapse;">
                                             <div mc:edit="std_preheader_links" style="text-align:left;mso-line-height-rule:exactly line-height:100%;font-size:10px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;">
                                                 Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank" style="text-decoration:underline;font-weight:normal;color:#336699;">View it in your browser</a>.
                                                </div>
                                            </td>
           <!-- *|END:IF|* -->
                                        </tr></table>
<!-- // End Module: Standard Preheader  -->
</td>
                            </tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer" style="background-color: #FFFFFF;border-width: 0px;border-collapse: separate;">
<tr>
<td align="center" valign="top" style="background-color: #DDDDDD; border-collapse:collapse;">
                                    <!-- // Begin Template Header  -->
                                 <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" style="border-bottom: 0;background-color: #dddddd;border-collapse: collapse;"><tr>
<td class="headerContent" style="vertical-align:middle;text-align:center;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:34px;font-family:Arial;color:#202020;border-collapse:collapse;padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;background-color:#dddddd;border-collapse: collapse;">

                                             <!-- // Begin Module: Standard Header Image  -->
                                             <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_6133508_original_1_.jpg" style="text-decoration:none;line-height:100%;height:auto;border:0;max-width:600px;outline-style:none;" id="headerImage campaign-icon" mc:label="header_image" mc:edit="header_image" mc:allowdesigner="" mc:allowtext=""><!-- // End Module: Standard Header Image  -->
</td>
                                        </tr></table>
<!-- // End Template Header  -->
</td>
                            </tr>
<tr>
<td align="center" valign="top" style="border-collapse:collapse;">
                                    <!-- // Begin Template Body  -->
                                 <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border-collapse: separate;">
<tr mc:repeatable>
<td colspan="3" valign="top" class="bodyContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <div mc:edit="std_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;background-color:#FFFFFF;-webkit-text-size-adjust:none;"><span style="font-size:12px;">Welcome to the first issue of...</span><br>
<br>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor
<hr>
</div>
              </td>
                                                    </tr></table>
<!-- // End Module: Standard Content  -->
</td>
                                      </tr>
<tr>
<td valign="top" width="280" class="leftColumnContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Top Image with Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;">
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image00"><div mc:edit="tiwc300_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	NEW APPOINTMENT
</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</div>
                                                        </td>
                                                    </tr>
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/Depositphotos_5757595_original.1.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image00"><div mc:edit="tiwc300_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	title</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor</div>
                                                        </td>
                                                    </tr>
</table>
<!-- // End Module: Top Image with Content  -->
</td>
                                         <td valign="top" width="280" class="rightColumnContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Top Image with Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;">
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image01"><div mc:edit="tiwc300_content01" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	NEW APPOINTMENT</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor
</div>
                                                        </td>
                                                    </tr>
<tr mc:repeatable>
<td valign="top" style="border-collapse:collapse; background-color: #FFFFFF" ;="">
                                                            <img src="http://gallery.mailchimp.com/7098b59dfcc7beb80da7b1bff/images/amanda.jpg" style="display:inline;text-decoration:none;line-height:100%;height:auto;border:0;max-width:260px;outline-style:none;" mc:label="image" mc:edit="tiwc300_image01"><div mc:edit="tiwc300_content01" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;-webkit-text-size-adjust:none;"><h4 class="h4" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:22px;font-family:Arial;display:block;color:#202020;">
	TEAM PROFILE</h4>
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra, quam et commodo placerat, nulla est mollis sapien, quis vehicula odio magna non neque. Proin porta purus eget elit tempus vehicula. Vivamus condimentum ullamcorper volutpat. Sed aliquam, metus a dapibus bibendum, odio sem dictum mi, ullamcorper lacinia risus urna et sem. Cras tristique, dolor ut posuere commodo, felis quam accumsan quam, a lacinia ipsum arcu ut dolor. Maecenas quis neque tellus. Vestibulum pellentesque arcu nec elit bibendum tempor </div>
                                                        </td>
                                                    </tr>
</table>
<!-- // End Module: Top Image with Content  -->
</td>
                                        </tr>
<tr mc:repeatable>
<td colspan="3" valign="top" class="bodyContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <div mc:edit="std_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;background-color:#FFFFFF;-webkit-text-size-adjust:none;"><h1 class="h1" style="border-bottom-color:#333;border-bottom-style:solid;border-bottom-width:1px;text-transform:uppercase;text-align:left;margin-left:0;margin-bottom:10px;margin-right:0;margin-top:0;mso-line-height-rule:exactly line-height:100%;font-weight:bold;font-size:28px;font-family:Arial;display:block;color:#202020;">
	NEW PROJECTS</h1>
<br>
</div>
              </td>
                                                    </tr></table>
<!-- // End Module: Standard Content  -->
</td>
                                        </tr><tr mc:repeatable>
<td colspan="3" valign="top" class="bodyContent" style="background-color:#FFFFFF;border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Content  -->
                                                <table border="0" cellpadding="20" cellspacing="0" width="100%" style="border-collapse: separate;"><tr>
<td valign="top" style="border-collapse:collapse;background-color:#FFFFFF;">
                                                            <div mc:edit="std_content00" style="text-align:left;mso-line-height-rule:exactly line-height:140%;font-size:12px;font-family:Arial;color:#505050;background-color:#FFFFFF;-webkit-text-size-adjust:none;"><h1 class="h1" style="color: #202020;display: block;font-family: Arial;font-size: 24px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;text-transform: uppercase;">
	RECENTLY COMPLETED</h1>
<hr>
</div>
              </td>
                                                    </tr></table>
<!-- // End Module: Standard Content  -->
</td>
                                        </tr>


</table>
<!-- // End Template Body  -->
</td>
                            </tr>

<tr>
<td align="center" valign="top" style="border-collapse:collapse;">
                                    <!-- // Begin Template Footer  -->
                                 <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateFooter" style="background-color: #DDDDDD;border-collapse:collapse;">
<tr>
<td valign="top" class="footerContent" style="border-collapse:collapse;">

                                                <!-- // Begin Module: Standard Footer  -->

                                                <table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color:#DDDDDD;border-collapse:collapse;">

<tr>
<td colspan="2" valign="left" id="social" style="background-color:#DDDddd;border-collapse:collapse;">
                                                            <div mc:edit="std_social" style="margin-bottom:10px;margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">&nbsp;<a href="*|FORWARD|*" style="text-decoration:underline;font-weight:normal;color:#666;">forward to a friend</a> </div>
                                                        </td>
                                                    </tr>
<tr>
<td valign="top" width="350" style="border-collapse:collapse;">
                                                            <div mc:edit="std_footer" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;"></div>
                                                        </td>
                                                        <td valign="top" width="190" id="monkeyRewards" style="border-collapse:collapse;">
                                                            <div mc:edit="monkeyrewards" style="text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                                                *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|*
                                                            </div>
                                                        </td>
                                                    </tr>
<tr>
<td colspan="2" valign="middle" id="utility" style="background-color:#DDD;border-collapse:collapse;">
                                                            <div mc:edit="std_utility" style="margin-top:10px;text-align:left;mso-line-height-rule:exactly line-height:125%;font-size:11px;font-family:Arial;color:#707070;-webkit-text-size-adjust:none;">
                                                                 <a href="*|UNSUB|*" style="text-decoration:underline;font-weight:normal;color:#666;">unsubscribe from this list</a> | <a href="*|UPDATE_PROFILE|*" style="text-decoration:underline;font-weight:normal;color:#666;">update subscription preferences</a>
                                                            </div>
                                                        </td>
                                                    </tr>
</table>
<!-- // End Module: Standard Footer  -->
</td>
                                        </tr>

</table>
<!-- // End Template Footer  -->
</td>
                            </tr>
</table>
<br>
</td>
                </tr></table>
</center>
    </table>

</body>
</html>
2

This is the exact code supplied by campaign monitor

@media only screen and (max-device-width: 480px) {
body {
padding: 10px !important;
}
.container {
padding: 0px 10px 5px 10px !important;
}
.header {
font-size: 16px !important;
}
.headline {
font-size: 20px !important;
}
#screenshot_image {
width: 275px;
height: 190px;
}
}

3

Not sure if this si what you mean, but code editors often give the word @media a different color to highlight it (mine defaults to orange, unlike the rest of the CSS). The real test is whether or not the email works in browsers.

4

Thanks ralph.m
Do you think I need to have two of the closing brackets as per my second post?
Again, this one is red

5

Yes indeed. You need to close off every bracket you open. (@media rules have extra outer brackets.)

@media only screen and (max-device-width: 480px) [B][COLOR="#FF0000"]{[/COLOR][/B]
  body {
    padding: 10px !important;
  }
  .container {
    padding: 0px 10px 5px 10px !important;
  }
  .header {
    font-size: 16px !important;
  }
  .headline {
    font-size: 20px !important;
  }
  #screenshot_image {
    width: 275px;
    height: 190px;
  }
[B][COLOR="#FF0000"]}[/COLOR][/B]

The two red ones match, and the others are like normal CSS.

6

Thanks ralph.m <3