Latest Comments
  1. Mario Derksen

    The display:none was new to me…
    You have to change
    max-height: none !important;

    to
    max-height: 0 !important;

    It works for me. Thanks. Good post!

    • Justin

      Hi Mario,

      Thanks for checking out the site! I’m not quite sure I follow your statement. In the example max-height: 0px is used to hide the content and max-height: none !important was used to unhide it when viewed in mobile.

  2. Todd

    Hey Justin,

    Cheers loads for this. I’ve just tested and outlook.com isn’t playing ball though! Any ideas?

    • Justin

      Hi Todd, Can you provide me more context on what is happening on Outlook.com? For Outlook.com simply adding the style display:none should hide whatever block you’re trying to hide.

    • Lee

      This will hide in anything outlook, including outlook.com

      Works for me.

  3. Ashar

    Hi

    thank you for the great tip.


    CONTENT HIDDEN FROM OUTLOOK 2007/10/13
    <!–

    Was very useful especially when display:none does not seem to work.
    Simply awesome!

    cheers
    Ashar

    • Justin

      Thank you Ashar. Sometimes you just need to hide things in Outlook if you can’t style them the way you need to.

  4. Stephen

    Just a quick FYI…tried using the “mso-hide:all” to try and hide an image contained within a table and I’m getting some inconsistent results in some versions of Outlook.

    Outlook 2000, 2002/XP, 2003 and 2011 hide the table without any problems.
    Outlook 2007, 2010 and 2013 show the table

    • Justin

      Hi Stephen,
      Thanks for the observation (your follow up comment got mangled since the comment system doesn’t like HTML comments in markup).

      One side-effect of mso-hide:all is that if there are nested tables, this style also needs to be applied to them as well (I will update the article to reflect this).

      – Justin

  5. Julien

    Very helpful article ! Thanks a lot !

  6. megan

    does this work with phone number links you only want displayed on mobile?

    • Justin

      Hi Megan,
      If you’re referring to links containing the prefix tel://, I’m not sure if this would be an ideal solution as its meant to hide blocks of content and not parts of text.

  7. cblemuel

    This exactly the best coding tweaks when you want to target a desktop and mobile site. I have been using this for more than a year and have no issues on mobile/desktop rendering – except the crap lotus notes / and blackberry email app.

  8. Ada

    Hi,
    Do you have a solution that works to hide the mobile version in Lotus Notes? My email is rendering fine in every other inbox but in Lotus Notes both the desktop and mobile versions are displayed- one under the other. Any help would be much appreciated.

    Thanks

    • Justin

      Hey Ada,

      Which version of Lotus Notes are you referring to? This method should work with Lotus Notes 8.5 and above.

      • Assow

        Hi,

        I have this problem too with Lotus Note 7.

        Thanks

        • Nicolai

          I have this problem with IBM Notes 9.

  9. Jon

    This is very helpful. One thing, yahoo mail app does not like display:none. If you have that in your inline css, it will still display the element. I’m not sure what the app is wiping out in terms of the css in the head tag, but anytime I have a display:none in the inline css, it does not hide the element. Just wanted to share that. Having max-height:0 should help, but if not sometimes setting the width to 0px as well and changing that in the media queries also helps.

    • Jon

      Actually I got myself backwards, If you want an element to show in yahoo mail app then you have to leave out the display: none in the inline css. Apparently my brain isn’t working this morning :)

  10. Gavin

    Great Article, Justin. Have you done much testing on Outlook iOS app – I need to hide content where the “kinetic” code (checked) does not work – any ideas?

    • Justin

      Gavin, you can use the fallback method covered in the Tabs for Email article. Basically, wrapping the interactive content with a DIV and a checked checkbox and displaying the DIV if the :checked selector is activated.

      http://freshinbox.com/blog/interactive-tabs-for-email/

  11. Darius

    Thank you for the post!

  12. Eoin

    For some reason I cannot get this to show again when on mobile. I’ve tried iPhone 5, 6 & 6+, iOs 7 & 8.

  13. Giulia

    Anyone having problem with text alignment of the hidden text? I have some problems, I am not able to center the text in the div….

  14. Olu

    mso-hide:all works for hiding content in outlook 2010, 2011 and 2013 for me but not for outlook.com. Any advice on how to hide mobile content for outlook.com email please?
    Many thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">