Giters

Mange / roadie

Making HTML emails comfortable for the Ruby rockstars

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

display none issue with media query

aditya-mandal opened this issue · comments

commented

Hi All,

Below is the html email template code which we test on different email clients like Gmail, Yahoo, Outlook, Rediffmail, iPhone, iPad.

In this we have two table block, we are trying to show the web part on web browsers and mobile part on iPhone and iPad.

But using this code on browser Gmail showing both blocks, Yahoo and Outlook showing mobile and iPhone and iPad showing mobile block.

@media not work properly.

Please suggest me what should i do for the solution?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Weekly</title>
  <style type="text/css">
    #web{
        display: inline-block;
    }
    #mobile{
        display: none;
    }
  </style>
  <style>
      @media only screen and (max-device-width: 480px) {
        #web{
            display: none;
        }
        #mobile{
            display: inline-block;
        }
    }
  </style>
</head>
<body>
    <table id="web">
        <tr>
            <td>
                aditya on web
            </td>
        </tr>
    </table>
    <table id="mobile">
        <tr>
            <td>
                aditya on mobile
            </td>
        </tr>
    </table>
</body>
</html>
commented

Pretty much no email client support media queries so you should not assume
it will work in most places.

However to make it work at all with Roadie, you need to add
'data-immutable' to the style block with the media queries.

Den måndagen den 30:e december 2013 skrev aditya-mandal:

Hi All,

Below is the html email template code which we test on different email
clients like Gmail, Yahoo, Outlook, Rediffmail, iPhone, iPad.

In this we have two table block, we are trying to show the web part on web
browsers and mobile part on iPhone and iPad.

But using this code on browser Gmail showing both blocks, Yahoo and
Outlook showing mobile and iPhone and iPad showing mobile block.

@media https://github.com/media not work properly.

Please suggest me what we do for the solution?

<title>Weekly</title> <style type="text/css"> #web{ display: inline-block; } #mobile{ display: none; } </style> <style> @media only screen and (max-device-width: 480px) { #web{ display: none; } #mobile{ display: inline-block; } } </style>
aditya on web
aditya on mobile

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/77
.

commented

Hi Magne

Thanks for reply.

We added

<style type="text/css">
    #web{
        display: inline-block;
    }
    #mobile{
        display: none;
    }
  </style>
  <style 'data-immutable'>
      @media only screen and (max-device-width: 480px) {
        #web{
            display: none;
        }
        #mobile{
            display: inline-block;
        }
    }
  </style>

But it gives same result.

On gmail shows both block and on hotmail shows mobile block.

Please help me.

commented

That's invalid markup. I don't know how Nokogiri handles it. Remove the
quotes around the data-immutable attribute.

So I think the reason Gmail shows both blocks is because the media query
works, but you are not allowed to use display none. Perhaps. I'm only
guessing here. Again, I don't think this approach will work at all.

Consider doing just a reflow of the same content instead of two different
versions of the same email. We've got this to work before at my place of
employment. You need a large outer table with only one column, with two
tables inside it. You can then affect the width of the outer table
depending on viewport, and therefore collapsing your two-column layout into
one on smaller screens (or the other way around, as we did it).

Remember that the most common corporate email client is Outlook and that it
uses the Microsoft Word engine to render emails. You can imagine how much
of HTML5 is implemented in Word 2009.

Den tisdagen den 31:e december 2013 skrev aditya-mandal:

Hi Magne

Thanks for reply.

We added

<style type="text/css"> #web{ display: inline-block; } #mobile{ display: none; } </style> <style 'data-immutable'> @media only screen and (max-device-width: 480px) { #web{ display: none; } #mobile{ display: inline-block; } } </style>

But it gives same result.

On gmail shows both block and on hotmail shows mobile block.

Please help me.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/77#issuecomment-31392230
.

commented

Just ran into this and adding data-immutable="true" (or probably just data-immutable as a prop) to the style block worked fine. Thanks!