How to hide a column on mobile in HTML email written in MJML?

cytsunny
January 23, 2024
164 views
0 votes
2 Answers

Is there a way I can hide an mj-column on mobile screen?

Here is what I have tried. While media query works on individual element like the p element in mj-text (successfully changed it to align right on mobile screen), it is not working on mj-column (the social elements are still visible on mobile screen).

https://mjml.io/try-it-live/qOsRwzQ-lP

<mjml>
  <mj-head>
    <mj-style>
      @media (max-width:480px) {
        .hidden {
          display: none;
        }
      }
      @media (max-width:480px) {
        .mobile {
          text-align: right;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section background-color="#eee">
        <mj-column>

          <mj-text>
            <p class="mobile">Title align right on mobile</p>
          </mj-text>

        </mj-column>
        <mj-column css-class="hidden">
            <mj-social font-size="15px" icon-size="30px" mode="horizontal">
              <mj-social-element name="facebook" href="https://mjml.io/">
                Facebook
              </mj-social-element>
              <mj-social-element name="google" href="https://mjml.io/">
                Google
              </mj-social-element>
              <mj-social-element  name="twitter" href="https://mjml.io/">
                Twitter
              </mj-social-element>
            </mj-social>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

P.S. HTML in email works very differently then that in browser due to the poor support of HTML5 in email clients. (And that’s why we need to use langauge like MJML to add in all those hacks for us) Unfortunetly it seems that hiding on mobile is one of those features that while some solution works in the live editor (i.e. browser), it is not working in the actual email. You may need to find some way to send out an actual email to test.

Answers

Try adding !important to the display: none, like so:

<mjml>
      <mj-head>
        <mj-style>
         @media (max-width:480px) {
          .hidden {
          display: none !important;
            }
          }
          @media (max-width:480px) {
          .mobile {
          text-align: right;
           }
          }
       </mj-style>
      </mj-head>
      <mj-body>
        <mj-section background-color="#eee">
          <mj-column>
            <mj-text>
              <p class="mobile">Title align right on mobile</p>
            </mj-text>
          </mj-column>
          <mj-column css-class="hidden">
            <mj-social font-size="15px" icon-size="30px" mode="horizontal">
              <mj-social-element name="facebook"></mj-social-element>
              <mj-social-element name="twitter"></mj-social-element>
              <mj-social-element name="google"></mj-social-element>
            </mj-social>
          </mj-column>
        </mj-section>
      </mj-body>
    </mjml>

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

EDIT:

Full path might do the trick:

<mjml>
  <mj-head>
    <mj-style>
      @media (max-width:480px) {
        body > div > div > table > tbody > tr > td > div.mj-column-per-50.mj-outlook-group-fix.hidden{
         display: none !important;
        }
      }
      @media (max-width:480px) {
       .mobile {
         text-align: right;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section background-color="#eee">
      <mj-column>
        <mj-text>
          <p class="mobile">Title align right on mobile</p>
        </mj-text>
      </mj-column>
      <mj-column css-class="hidden">
        <mj-social font-size="15px" icon-size="30px" mode="horizontal">
          <mj-social-element name="facebook"></mj-social-element>
          <mj-social-element name="twitter"></mj-social-element>
          <mj-social-element name="google"></mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

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

What you want for the best solution is to have it mobile first so that even clients like Gmail IMAP work, with a fallback for Outlook desktops.

We can achieve this with inline="inline" to set display: none on the mobile block, and then override that for desktops with media queries.

<mjml>
  <mj-head>
        <mj-style inline="inline"> 
    .hidden {
        display: none !important;
        mso-hide: none; 
    } 
      
    </mj-style> 
    <mj-style>
    @media only screen and (min-width:480px) { 
.hidden { 
    display: inline-block !important;
 }  
}
      @media only screen and (max-width:480px) { 
.mobile { 
    text-align: right !important;
 }  
}
    </mj-style>
  </mj-head>
  <mj-body>
      <mj-section background-color="#eee">
        <mj-column>

          <mj-text>
            <p class="mobile">Title align right on mobile</p>
          </mj-text>

        </mj-column>
        <mj-column css-class="hidden">
            <mj-social font-size="15px" icon-size="30px" mode="horizontal">
              <mj-social-element name="facebook" href="https://mjml.io/">
                Facebook
              </mj-social-element>
              <mj-social-element name="google" href="https://mjml.io/">
                Google
              </mj-social-element>
              <mj-social-element  name="twitter" href="https://mjml.io/">
                Twitter
              </mj-social-element>
            </mj-social>
        </mj-column>
        
      </mj-section>
      <mj-section> 
</mj-section> 
  </mj-body>
</mjml>

Test that here: https://mjml.io/try-it-live/cud21mVa4S

I’ve tested this on Litmus and it works on all major platforms (Apple mail, outlook desktop, gmail apps ios android and imap, iPhone, outlook apps android and ios, samsung app, and webmails – gmail, outlook.com and yahoo).

Spacing of columns needs tidying but you can do that.

Please signup or login to give your own answer.

Click here to cancel reply.