Solution 1 :

  @media screen and (min-device-width:641px),
        screen and (min-width:641px) {
            .gapmob {

                display: none!important;

            }}

Add this code in CSS

Problem :

I’ve been trying to hide a block element in outlook desktop and show another block element in outlook mobile but it doesn’t work and I don’t know why because I’m using the same method as I was using before but still doesn’t work.

Can you please check my code and tell me if you have any suggestions? Thank you!

Please check the screenshot with the way it displays in outlook here
https://imgur.com/U6b2oSj

On mobile it hides the element, is just the desktop outlook that it doesn’t

<html  xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" xmlns_msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="format-detection" content="date=no">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="x-apple-disable-message-reformatting">
  <title></title>

  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&amp;display=swap" rel="stylesheet">

  <style type="text/css">
    * {
      mso-line-height-rule: exactly;
    }
    
    div,
    p,
    a,
    li,
    td,
    body {
      -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      font-family: 'Roboto Condensed', sans-serif;
    }
    
    table td {
      border-collapse: collapse;
    }
    
    body,
    p {
      margin: 0;
      padding: 0;
    }
    
    .ExternalClass {
      width: 100%;
    }
    
    .ExternalClass * {
      line-height: 110%
    }
    
    img {
      -ms-interpolation-mode: bicubic;
      display: block;
      border: 0;
    }
    
    blockquote .orig,
    .WordSection1 .orig {
      display: none!important;
    }
    
    table th {
      margin: 0!important;
      padding: 0!important;
      vertical-align: top;
      font-weight: normal;
    }
  </style>
  <style type="text/css">
    @media screen {
      a[href^="tel"],
      a[href^="sms"],
      .moblinks a {
        color: inherit;
        text-decoration: none!important;
      }
    }
    
    a[x-apple-data-detectors] {
      color: inherit!important;
      text-decoration: none!important;
      font-size: inherit!important;
      font-family: inherit!important;
      font-weight: inherit!important;
      line-height: inherit!important;
    }
    
    div[style*="margin: 16px 0"] {
      margin: 0!important;
    }
  </style>
  <style type="text/css">
    @media screen and (max-device-width:640px),
    screen and (max-width:640px) {
      .gapmob {
        width: 100%!important;
        float: left!important;
        display: block!important;
        padding-top: 10px!important;
      }
      .stack {
        width: 100% !important;
        float: left !important;
        display: block !important;
        align-content: center !important;
        text-align: center !important;
      }
      .CTR {
        align-content: center !important;
        text-align: center !important;
        width: 100% !important;
      }
      .colsplit {
        width: 100%!important;
        float: left!important;
        display: block!important;
      }
      .wrapto320px {
        width: 380px!important;
        min-width: 380px!important;
        max-width: 380px!important;
        height: auto!important;
      }
      .wrapto320px .FontHeader {
        font-size: 30px !important;
        line-height: 1.2 !important;
      }
      .wrapto280px {
        width: 280px!important;
        min-width: 280px!important;
        max-width: 280px!important;
        height: auto!important;
      }
      .wrapto100pc {
        width: 100%!important;
        min-width: 100%!important;
        max-width: 1000px!important;
        height: auto!important;
      }
      .wrapto100pcmax {
        width: auto!important;
        height: auto!important;
        max-width: 100%!important;
        display: block!important;
      }
      .nomob {
        display: none!important;
        width: 0px!important;
        height: 0px!important;
      }
      .textcenter {
        text-align: center!important;
      }
      .textleft {
        text-align: left!important;
      }
      .textright {
        text-align: right!important;
      }
      .show {
        display: block!important;
        overflow: visible!important;
        float: none!important;
        width: 100%!important;
        height: auto!important;
        max-height: inherit!important;
      }
      .logo {
        width: 120px!important;
        height: auto!important;
      }
      .clearbg {
        background-image: none!important;
      }
      .ptop10 {
        padding-top: 10px!important;
      }
      .valignmobtop {
        vertical-align: top!important;
      }
      .valignmobmiddle {
        vertical-align: middle!important;
      }
      .valignmobbottom {
        vertical-align: bottom!important;
      }
      .mobheightclear {
        height: auto!important;
      }
      .mobheight100 {
        height: 100px!important;
      }
      .mobheight150 {
        height: 150px!important;
      }
      .mobheight200 {
        height: 200px!important;
      }
      .mobheight250 {
        height: 250px!important;
      }
      .mobheight300 {
        height: 300px!important;
      }
      .mobheight350 {
        height: 350px!important;
      }
      .mobheight400 {
        height: 400px!important;
      }
      .mobheight450 {
        height: 450px!important;
      }
      .mobheight500 {
        height: 500px!important;
      }
      .mobheight550 {
        height: 550px!important;
      }
      .mobheight600 {
        height: 600px!important;
      }
      .mobheight650 {
        height: 650px!important;
      }
      .mobheight700 {
        height: 700px!important;
      }
      .mobheight750 {
        height: 750px!important;
      }
      .mobheight800 {
        height: 800px!important;
      }
    }
  </style>

  <!--[if (mso)|(mso 16)]>
    <style type="text/css">
    a {text-decoration: none;}
    </style>
    <![endif]-->

  <!--[if mso] >
    <style type="text/css"> 
    table, td, div, p {
    font-family: arial, sans-serif !important; 
    line-height:normal; 
    }
    </style>
    <![endif]-->

  <!--[if gte mso 9]><xml>
    <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
    </o:OfficeDocumentSettings>
    </xml><![endif]-->

  <!--[if gte mso 9]><xml>
<o:CustomDocumentProperties>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor msdt_dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor>
<o:Order msdt_dt="string">5825000.00000000</o:Order>
<o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author msdt_dt="string">Ionut Mitu</o:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author>
<o:ContentTypeId msdt_dt="string">0x0101003BA064F954674D4B968EEE2A83BA3752</o:ContentTypeId>
</o:CustomDocumentProperties>
</xml><![endif]-->
</head>

<body class="body" leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#ffffff" style="margin:0 !important; padding:0 !important; width:100% !important;"><img src="https://s4cloudae36f1aac.hana.ondemand.com:443/data-buffer/sap/public/cuan/link/100/53453E04AD2A2EA685C0B93208E78873279FF43A/pixel.gif?_L54AD1F204_=c2NlbmFyaW89TUxPUEVOJnRlbmFudD1teTMwMzczNi5zNGhhbmEub25kZW1hbmQuY29t" width="1" height="1" border="0"
    alt="">

  <!--[if mso]></td></tr></table><![endif]-->
  <!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt;  mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
  <div style="float: left; width: 100%" class="sapMktBlock">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" bgcolor="#FFFFFF">

      <tr>
        <td style="font-size: 0px;" class="nomob">&nbsp;</td>
        <td align="center" width="640" style="width: 640px; min-width: 640px;" class="wrapto320px">
          <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width: 100%;" class="wrapto320px">

            <tr>
              <td align="left">
                <table role="presentation" width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0" bgcolor="#fff">

                  <tr>
                    <td align="center" valign="top" style="padding: 0px 0px 0px 0px;" class="textcenter">

                      <table width="100%" style="min-width: 100%;" border="0" align="left" cellspacing="0" cellpadding="0" bgcolor="#ffffff">

                        <tr>
                          <td align="left" valign="top">
                            <table width="100%" style="min-width: 100%;" border="0" cellspacing="0" cellpadding="0">

                              <tr>
                                <td align="left" style="font-family: 'Roboto Condensed', Arial, sans-serif; line-height: 21px; color: #000000;" class="textcenter">
                                  <table align="left" border="0" cellspacing="0" cellpadding="0" class="wrapto100pc">

                                    <tr>
                                      <td width="600" align="left" style="padding: 0px 0px 0px 20px; font-family: 'Roboto Condensed', Arial, serif;  color: #ffffff;" class="textcenter">
                                        <b><a align="left" href="" style="color: #000000; font-size: 30px; text-align: left; text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">EXPLORE</a></b>
                                        <br>

                                      </td>
                                    </tr>

                                  </table>
                                </td>
                              </tr>
                              <tr>
                                <td align="left" style="padding: 20px 0px 20px 0px;" class="textcenter">
                                  <table style="display: inline-block;" border="0" cellspacing="0" cellpadding="0" class="cta">

                                    <tr>
                                      <td style="padding: 0px 0px 0px 20px; ">
                                        <!--button-->

                                        <table role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner  nomob">

                                          <tr>
                                            <td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px;  text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FIRST</a></td>

                                            <td width="20" align="center" bgcolor="#ffffff">&nbsp;</td>

                                            <td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px;  text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">SECOND</a></td>

                                            <td width="20" align="center" bgcolor="#ffffff">&nbsp;</td>

                                            <td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px;  text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">THIRD</a></td>

                                            <td width="20" align="center" bgcolor="#ffffff">&nbsp;</td>

                                            <td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px;  text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;"><a rel="noopener noreferrer" href="" target="_blank" style="color: #000000; text-decoration: none; display: block;">FORTH</a></td>
                                          </tr>

                                        </table>
                                      </td>
                                    </tr>

                                  </table>

                                  <div style="width: 0; overflow: hidden; float: left; display: none; max-height: 0px; mso-hide: all;" class="show">

                                    <table align="center" role="presentation" border="0" cellspacing="0" cellpadding="0" class="ctainner">

                                      <tr>
                                        <td align="center" bgcolor="#ffffff" style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px;  text-decoration: none; font-family: 'Roboto Condensed', Arial, sans-serif;">
                                          <a rel="noopener noreferrer" href=" target=" _blank " style="color: #000000; text-decoration: none; display: block; ">FIRST</a></td>

                                                                            <td width="20 " align="center " bgcolor="#ffffff ">&nbsp;</td>

                                                                            <td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
                                            'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">SECOND</a></td>

                                                                        </tr>
                                                                        <tr>

                                                                            <td>

                                                                                &nbsp;
                                                                            </td>
                                                                        </tr>
                                                                        <tr>

                                                                            <td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
                                            'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">THIRD</a></td>

                                                                            <td width="20 " align="center " bgcolor="#ffffff ">&nbsp;</td>

                                                                            <td align="center " bgcolor="#ffffff " style="border:1px solid #000000; padding: 10px 20px; color: #ffffff; font-size: 16px; text-decoration: none; font-family:
                                            'Roboto Condensed', Arial, sans-serif; "><a rel="noopener noreferrer " href=" " target="_blank " style="color: #000000; text-decoration: none; display: block; ">FORTH</a></td>
                                                                        </tr>

                                                                    </table>

                                                                </div>
                                                            </td>
                                                        </tr>

                                                    </table>
                                                </td>
                                            </tr>

                                        </table>

                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>

                </table>
            </td>
            <td style="font-size: 0px;mso-line-height-rule: exactly;-webkit-text-size-adjust: none;-ms-text-size-adjust: none;font-family: 'Roboto Condensed', sans-serif;border-collapse: collapse; " class="nomob ">&nbsp;</td>
        </tr>

    </table>
</div>

</body>
</html>

Comments

Comment posted by Nathan

Please put the minimum code required; this is way to much to easily wade through. I can’t even see where the element you want hidden is in that thicket! The easier it is for others, the more help you’ll receive.

By

Leave a Reply

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