CODEWITHSUNDEEP
htmlcssemailhtml-email
Shaun Moore
Shaun Moore

Reputation: 122

How to use @Media queries

I'm creating an email template and I am trying to make it responsive now I've run into a problem, I have been looking into using the "@media" tags but emails don't really like <style> so I'm really not sure how to do it.

<body>
 <table>
  <table>
   <tr>
    <td>
     text blah blah
    </td>
   </tr>
  </table>
<!-- This is the one I was responsive (The one below) -->
  <table>
   <tr>
    <td>
      Make this table responsive <3
    </td>
   </tr>
  </table>
 </table>
</body>

P.S, I don't need the top to be responsive so how can I link the second one to the CSS

I have all my tables and the Desktop design look perfecto' E.G the divs and tables are '%' not 'px' and I have 2 divs next to each other when it get scaled down to mobile they are still at 50% of the browser screen (50% of the mobile and desktop) but when they get scaled down I want them to be 100% of the mobile screen

Upvotes: 0

Views: 145

Answers (5)

knocked loose
knocked loose

Reputation: 3304

In HTML emails, you have two ways to do all of your styling, since you can't have a seperate stylesheet.

The first is a <style> tag. Your email will have a structure of <html>-><head>-><body>.

<style> tags can only be placed in the head so your set up should look something like this.

<html>
  <head>
    <style>
      @media screen only (max-width:767px){
        /* Your CSS goes here */
      }
    </style>
  </head>
  <body>
    /*HTML Code goes here */
  </body>
</html>

The other option you have will only work if you just want to change width, and that would be using percents in your element's inline styling, like this:

<div class="header-block" style="width:100%;"></div>

You can find more on using media queries in emails on litmus.com.

If you already have it made up with extra CSS in your style tag, the Inline styler tool might be able to help you convert embedded styles to inline.

Upvotes: 0

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

<head>
    <style>
        @media only screen and (max-width: 771px) {
            /*add your class and code here*/
        }
    </style>
</head>

Upvotes: 2

Gortonington
Gortonington

Reputation: 3587

There are two approaches to using media queries - mobile first or desktop first.

The way that has the most support and is likely the easiest for someone just entering into HTML CSS is desktop first approach. In this you will inline all the styles for your desktop rendering. You then add media queries for the different breakpoints to make the email fit the device screen. This is easiest and has most support as the only mobile email clients that do not really support media queries are ones like the Gmail App (which are usually a small percentage of your mobile audience). The issue is that, using the Gmail App as an example, depending on how you styled your email, this may cause it to break on Gmail app - causing display issues.

This is where the mobile first approach comes in. Mobile first builds the email with inline styles to display correctly in gmail app and then uses media queries and mso conditional statements to make it flesh out and fill correctly on a desktop display. This requires much more knowledge of CSS and email client 'quirks and hacks' but can create emails that display beautifully across all clients. This can sometimes require much more styling and much more code to accomplish due to the complexity of the different processors in email clients.

For initial forays I would recommend building as always desktop first and then use media queries for mobile as it is simple and is much more widely supported, so requires much less hacks.

For help with supported CSS, please reference - http://www.campaignmonitor.com/css

Hope this info helped.

References:

Litmus - https://litmus.com/blog/understanding-media-queries-in-html-email

Email on Acid - https://www.emailonacid.com/blog/article/email-development/media_queries_in_html_emails

CampaignMonitor - https://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

Upvotes: 0

MrHaze
MrHaze

Reputation: 3996

<style> tag would go into the <head> tag.

But be careful what you use some platform have abysmal email CSS support, also see this.

I would limit my use of CSS3/HTML5 in emails.

But honestly I wouldn't bother with building it from scratch, it's just too tedious of a task; you have to get it working on different platforms.

I would use an email HTML builder (most are free) like:

*Note: Conventionally with HTML emails you would lay everything out with tables, not grids.

Upvotes: 0

Simeon
Simeon

Reputation: 1

already done and use and try it Its not using in Media inside a table structure

<table width="600px" max-width="100%" align="center">
  <tr><td>content......</td><td>content....</td></tr>
  <tr><td>content......</td><td>content....</td></tr>
  <tr><td>content......</td><td>content....</td></tr>
  <tr><td>content......</td><td>content....</td></tr>
</table>

Upvotes: -1

Related Questions