Create a Discussion

Hiding Elements in All Instances of Outlook

Alex Barnes posted 2016-05-20 14:09:50

Hi,

I've been scouring the internet for the past few hours and have come across oh so many contradicting articles, so thought I'd go straight to source and ask the professionals.

Is there a way of hiding elements, be it text or image from all instances of Outlook only (not just 2007 and 2013) I've used

style="mso-hide:all;display:none;max-height:0px;overflow:hidden;"

which does the trick however also hides in other clients.
Using a specific class for clients that allow webkit also doesn't seem to overwrite the above code.

Any advice would be appreciated.

Thanks,
Alex.

Cody Thompson replied 2016-05-22 03:28:48

I have used this with some pretty good success. Hope it helps:

<style>

div[class=mobilecontent]{
    display: block !important;
    max-height: none !important;
  }   

</style>


<!--[if !mso 9]><!-->
<div class="mobilecontent" style="display:none;max-height:0px;overflow:hidden;">

CONTENT HERE THAT YOU WANT TO HIDE 

</div>
<!--<![endif]-->

Reply to Cody Thompson

Amy Moore replied 2017-11-14 17:41:51

Cody - Thank you for this solution! It works very well when trying to hide an unsupported element because it appears to target only the Outlook (Word) rendering engine.

Rémi Parmentier replied 2016-05-20 15:00:01

Hi,

If what you want is to target Outlook only, then you only need mso-hide:all. The other properties are there to hide element in other clients (display:none is the generic one, and max-height:0; overflow:hidden; is used for Gmail).

Reply to Rémi Parmentier

Alex Barnes replied 2016-05-20 16:23:57

Hi Remi,

many thanks for getting back to me. It was my impression that adding mso-hide:all will still show in Outlook 2011, 2016 and Outlook.com.

Is there a way to hide these also?

Rémi Parmentier replied 2016-05-21 08:28:56

Hi Alex,

You're right. In order to hide this content on Outlook.com (both the old and new version), I would suggest adding a class (for example class="not-for-outlook") on the element you want to hide, and then the following styles :

.ExternalClass .not-for-outlook, [owa] .not-for-outlook { display:none; }

(The class .ExternalClass is there by default on the old Outlook.com. The new Outlook.com will strip attribute selectors, so [owa] will be removed and thus the selector applied for this webmail only.)

As for Outlook 2011 and 2016 (on OS X I presume), I'm not sure there's a way to target these client specifically, as they both run on WebKit. You'd risk hiding content on other clients as well.

Maybe a good question is why you'd want to hide content from these clients anyway ?

Donna Galletta replied 2021-02-21 23:56:22

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>title</title>

    <style>
       /* Show on Device  */
       @media only screen and (max-width: 480px){
          .mso-browser { display: block !important; }
        }
    </style>
  </head>
  <body>

    <!--[if !mso]><!-- -->
      <div class="mso-browser" style="display: none;">
        This hides in Outlook!
      </div>
    <!--<![endif]-->

     <!--[if mso]>&nbsp;<![endif]-->


  </body>
</html>

Reply to Donna Galletta

-3

Mark Laurence Libre replied 2017-07-26 14:38:56

font-size:0px;
color: transparent;
width:0px;
height:0px;

Any of these will do..

Reply to Mark Laurence Libre

Hiding Elements in All Instances of Outlook

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password