Mjml: mj-section hide on outlook/2003/2007/2010/2013/2016 and mobile

[mjml1982]

Hello,
I am trying to hide/show contents on mobile and desktop, i have two classes one is for mobile and one is for desktop, desktop class is hiding contents of desktop on mobile and vice versa.

When i try to hide mobile contents from desktop using show_on_mobile{display:none !important;}, mjml is adding show_on_mobile class on div tag and outlook 2007/2010/2013/2016 are not hiding these contents in desktop clients but when i go one level down in media query show_on_mobile table{display:none !important;} it hides the whole section of mobile from the desktop.

When i do above step then it does not show the mobile version of same block on mobile devices even though i add the css class to section level, column level or element level.

I looked in the compiles HTML code and noticed that mjml wrapping all the section code in a div tag and adding class name to it when we add css-class in section and somehow new versions of outlook are ignoring the classes in div tags, i hope this information will help to resolve this issue.

Here is my MJML code.

.show_on_mobile { display:none !important;font-size:0px !important;max-height:0px !important;line-height:0px !important;}

  @media only screen and (max-width:480px) { 
    .show_on_desktop {display:none !important;}
    .show_on_mobile {display:block !important;padding-top:10px;}
    }

</mj-style>

<mj-section css-class="show_on_desktop"  border="1px solid #dddddd"  background-color="#ffffff" margin="0" >
  <mj-group>
    <mj-column css-class="show_on_desktop"   padding="0 0 0 0" >
      <mj-image  width="243" height="45" align="center" href="#" src="http://iir-t.com/logo_transparent.png" alt="" padding="0 0 0 0">
        </mj-image> 
    </mj-column>
    <mj-column  css-class="show_on_desktop" padding="0 0 0 0" >
      <mj-text font-family="Raleway, Arial" font-size="14px" color="#000000" align="center" font-weight="bold" line-height="140%" padding="0">
        <a href="#" class="link-nostyle" style="text-decoration:none;"> STORE LOCATOR</a>
      </mj-text>
    </mj-column>
    <mj-column css-class="show_on_desktop" padding="0 0 0 0" >
      <mj-text font-family="Raleway, Arial" font-size="14px" color="#000000" align="center" font-weight="bold" line-height="140%" padding="0">
        <a href="#" class="link-nostyle" style="text-decoration:none;"> SHOPE ONLINE</a>
      </mj-text>
    </mj-column>
  </mj-group>
</mj-section>


<mj-section css-class="show_on_mobile" border="1px solid #000000"  background-color="#ffffff" margin="0 0 0 0" padding="0 0 0 0">      
  <mj-column width="200px" padding="0 0 0 0" >
    <mj-button        
      href="http://iir-t.com/" 
      border-radius="5px" 
      text-decoration="none" 
      font-family="Verdana, Geneva, sans-serif" 
      background-color="#c7c2c2" 
      color="white" 
      width="100%" 
      font-size="12px"
      line-height="15px" 
      >

      SHOPE LOCATOR           
      </mj-button>
  </mj-column>

  <mj-column width="200px" padding="0 0 0 0"  >
    <mj-button 

      href="http://iir-t.com/" 
      border-radius="5px" 
      text-decoration="none" 
      font-family="Verdana, Geneva, sans-serif" 
      background-color="#c7c2c2" 
      color="white" 
      width="100%" 
      font-size="12px"
      line-height="15px"
     >

      SHOPE ONLINE

      </mj-button>
  </mj-column>

  <mj-column  width="200px" padding="0 0 0 0"  >
    <mj-button         
      href="http://iir-t.com/" 
      border-radius="5px" 
      text-decoration="none" 
      font-family="Verdana, Geneva, sans-serif" 
      background-color="#c7c2c2" 
      color="white" 
      width="100%" 
      font-size="12px"
      line-height="15px"
      >

     WWW.IIR-T.COM

      </mj-button>
  </mj-column>      

</mj-section>

Observed behavior:

This code should hide desktop contents on mobile and vice versa.

MJML version:

4.0
Email clients the bug is seen on:

outlook 2007/2010/2013/2016

[iRyusa]

Hi,
Media queries aren’t supported on outlook desktop so there’s not so much we can do

On 4 May 2018, at 20:47, mjml1982 [e-mail] wrote:

Hello,
I am trying to hide/show contents on mobile and desktop, i have two classes one is for mobile and one is for desktop, desktop class is hiding contents of desktop on mobile and vice versa.

When i try to hide mobile contents from desktop using show_on_mobile{display:none !important;}, mjml is adding show_on_mobile class on div tag and outlook 2007/2010/2013/2016 are not hiding these contents in desktop clients but when i go one level down in media query show_on_mobile table{display:none !important;} it hides the whole section of mobile from the desktop.

When i do above step then it does not show the mobile version of same block on mobile devices even though i add the css class to section level, column level or element level.

I looked in the compiles HTML code and noticed that mjml wrapping all the section code in a div tag and adding class name to it when we add css-class in section and somehow new versions of outlook are ignoring the classes in div tags, i hope this information will help to resolve this issue.

Here is my MJML code.

.show_on_mobile { display:none !important;font-size:0px !important;max-height:0px !important;line-height:0px !important;}
@media only screen and (max-width:480px) {
.show_on_desktop {display:none !important;}
.show_on_mobile {display:block !important;padding-top:10px;}
}

STORE LOCATOR



SHOPE ONLINE

href="http://iir-t.com/"
border-radius="5px"
text-decoration="none"
font-family="Verdana, Geneva, sans-serif"
background-color="#c7c2c2"
color="white"
width="100%"
font-size="12px"
line-height="15px"
>

  SHOPE LOCATOR           
  </mj-button>

  href="http://iir-t.com/" 
  border-radius="5px" 
  text-decoration="none" 
  font-family="Verdana, Geneva, sans-serif" 
  background-color="#c7c2c2" 
  color="white" 
  width="100%" 
  font-size="12px"
  line-height="15px"
 >

  SHOPE ONLINE

  </mj-button>

href="http://iir-t.com/"
border-radius="5px"
text-decoration="none"
font-family="Verdana, Geneva, sans-serif"
background-color="#c7c2c2"
color="white"
width="100%"
font-size="12px"
line-height="15px"
>

 WWW.IIR-T.COM

  </mj-button>

Observed behavior:
This code should hide desktop contents on mobile and vice versa.

MJML version:

4.0
Email clients the bug is seen on:

outlook 2007/2010/2013/2016

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[mjml1982]

Hi, thanks for quick response but the code i am using to hide mobile element on desktop has written outside the media queries.

Here is the code.

show_on_mobile { display:none !important;font-size:0px !important;max-height:0px !important;line-height:0px !important;}

[ngarnier]

There are some confusions in this issue. Here is a summary:

• css-class adds the class on the wrapping div: yes, as we can't guess what element users want to target when they use css-class, the class is indeed added to the root tag. If you want to target a specific element, use a css selector (like your-class > td)
• outlook doesn't ignore css class on div tags, it ignores media queries

There is a template for issues, and there's a reason for that. We're asking for the whole MJML to reproduce, and for screenshots to understand the issue. Without those, it's impossible to fully understand your problem. Please provide the info you're asked for if you want us to help you.

[mjml1982]

@ngarnier Thanks for your reply, yes thats what i am trying to solve, i have used css-class > table approach to hide the root table in wrapping div but still have no success, outlook's desktop versions greater than 2003 are not responding to the css code somehow.

I am sharing email on acid results, you will notice desktop-content block is hidden on mobile devices as i have used media queries but mobile-content block is not hidden on outlook except outlook 2003.

Your help will be great support, i am able to do this with HTML/CSS template but i want to know how we can do this with MJML since it helped me a lot to build templates quickly.

My complete MJML 4.0 code.

https://mjml.io/try-it-live/SyNUOYJ0f

EmailOnAcid Link
https://www.emailonacid.com/app/acidtest/a0ZKvprpE8YK0Iby0J5FElaHeUYeNcyn2vIiC6k8LRnMm/list

Thanks.

[ngarnier]

The issue is not with MJML (the styles are properly applied), but specific to Outlook, so I doubt this would work with regular HTML as well.

• First, you might want to use mj-style inline="inline" for the default mobile styles (hiding the section), so that those styles are inlined instead of being in the <head> styles
• Then, display:none is not supported by Outlook, you need a specific property like mso-hide:all, which needs to be applied on all children tables

Something like that should work better: https://mjml.io/try-it-live/ryEBhQgAG

[mjml1982]

Thank you so much for your help, looks like i was not targeting the outlook tables in the wrapping div's.

[ahmetdereli]

The issue is not with MJML (the styles are properly applied), but specific to Outlook, so I doubt this would work with regular HTML as well.

• First, you might want to use mj-style inline="inline" for the default mobile styles (hiding the section), so that those styles are inlined instead of being in the <head> styles
• Then, display:none is not supported by Outlook, you need a specific property like mso-hide:all, which needs to be applied on all children tables

Something like that should work better: https://mjml.io/try-it-live/ryEBhQgAG

It's a good solution. Thanks.

This version align left the content when mobile. I change the like below, bu now now one colums aligned left, what ever i try, it isn't aligned center. two or more columns are normal.

https://mjml.io/try-it-live/BksAMpEaX

Do you have any idea about that?

Thanks.

[ngarnier]

@ahmetdereli why don't you just add the column inside the other section, like that: https://mjml.io/try-it-live/SJhJl6LaX?

[ahmetdereli]

@ahmetdereli why don't you just add the column inside the other section, like that: https://mjml.io/try-it-live/SJhJl6LaX?

@ngarnier In this sample all columns are same section. But i need one column in a different section as i said. 2 or more sections working normal but one column aligned left.

This is part of my template: https://mjml.io/try-it-live/SyZczTUaQ

You can see the problem.

[ngarnier]

Looks like it's because you target the table, look at this example using another section fixed: https://mjml.io/try-it-live/Sy0EYT8aQ.

[ahmetdereli]

@ngarnier without table outlook don't hide the content. but add table for mso-hide:all seems working for all. Thanks for your help.

https://mjml.io/try-it-live/SyRUTT8pm

[AGachet]

Just a little information for those who will looking for a way to hide a section in outlook, the proposed solution work well but I advise you to add div with font-size: 0!important; line-height: 0!important; :

    <mj-style inline="inline">
      .show_on_mobile table,
      .show_on_mobile-outlook table,
      .show_on_mobile div {
        display:none;
        mso-hide:all;
        max-height: 0;
        font-size: 0!important;
        line-height: 0!important;
        overflow: hidden;
      }
    </mj-style>
    <mj-style>
      @media only screen and (max-width:480px) { 
      @media only screen and (max-width:480px) {
        .show_on_desktop {
          display:none !important;
        }
        .show_on_mobile table, .show_on_mobile-outlook table {
          display:block!important;
          max-height: 200px!important;
          overflow: visible!important;
        }
      }
    </mj-style>

In case you have a mj-text with a style includingfont-size and line height the text will be displayed on desktop devices even if you add the class show_on_mobile in your code. Keep in mind that your mj-[whatever] components inside your sections/columns can break the desired behavior depending on there css style.