Media Queries CSS3
Media Queries are a CSS3 module that allows the way content is rendered to be adapted by applying conditions to elements such as screen resolution.
For example, a landscape view on an iPhone 4 and lower is 480px. Using a media query we can specify a particular set of styles to be implemented when your email is opened on this device.
So how do I write a media query?
An example of a media query for viewing emails on an iPhone looks like the above.
All you’re saying here is that if this email is viewed on a screen with a maximum device width of 480px, then the CSS styles that are contained within the two curly braces should be used.
Where does my CSS go?
The CSS for your email design goes at the very top of your email code, above all of the HTML content. Using CommuniGator you don’t need to include the HTML tags that you would if you were designing a website, all you need is the CSS and your email code.
Putting the two snippets of code above together, along with a media query specific style, would look like the following:
<style>
body {
background-color:#000000;
}
@media only screen and (max-device-width) {
[class].w100 {
width:100% !important;
}
}
</style>