Lotus Notes 8.0 showing media query as text

Hi,

So I recently ran into an issue with Lotus Notes 8.0 where my media queries were just being shown as text. I've never seen this in any other client, and it works fine in all the other versions of lotus.

Here is the code of the style in the head, the only thing slightly out of the ordinary is that I used a "nested" media query (something really dumb with ipad where it was using the mobile media query even though it should not have).

<style type="text/css">
              a:hover {color: #990000;}
              a:visited {color: #003399 }
              a:visited:hover {color: #003399; text-decoration: none}
              
              
              body { width: 100%; }
              
              
              body { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; }
              
              
              body { -webkit-font-smoothing: antialiased; }
              
              
              body { border-collapse: collapse; }
              
              @media print {
              #master {
              padding: 0px !important;
              width: 100% !important;
              }
              }
            </style>
    <style media="not screen and (device-width:768px)" type="text/css">@media only screen and
            (max-width: 727px),
            (max-device-width: 727px) {
              body[fix] #master {
              margin: 0 !important;
              padding: 0 !important;
              width: 100% !important;
              
                max-width: 727px !important;
              }
              body[fix] td.column_left,
              body[fix] td.column_right
              {
              display: block !important;
              width: 100% !important;
              max-width: 100% !important;
              padding-left: 0 !important;
              padding-right: 0 !important;
              }
              body[fix] .column_divider {
              display: none !important;
              }
              body[fix] .scale_full_width {
              width: 100% !important;
              height: auto !important;
              }
              body[fix] .stretch_full_width {
              width: 100% !important;
              }
              body[fix] .horizontal_blocks > * {
              display: block !important;
              }
              body[fix] .horizontal_block_divider {
              display: block !important;
            border: none !important;
            margin: 0 auto !important;
            width: 90% !important;
            height: 1px !important;
              }
              body[fix] .standard_section_header {
              white-space: normal !important;
              }
              body[fix] .section_sponsor_header {
              display: block !important;
              width: 100% !important;
              }
              body[fix] .section_sponsor_logo {
              display: block !important;
              padding: 0 !important;
              vertical-align: middle !important;
              }
              body[fix] .job_board_listings td {
              padding: 4px !important;
              }
              body[fix] .viral {
              text-align: center !important;
              white-space: nowrap !important;
              max-width: 100% !important;
              }
              body[fix] .button_separator {
              height: 5px !important;
              }
              body[fix] .mobile_center {
              text-align: center !important;
              }
              body[fix] .mobile_hide {
              display: none !important;
              }
              body[fix] .section_sponsor_logo:before {
              content: "Sponsored By:";
              color: #666666;
              font-weight: normal;
              font-size: 10px;
              vertical-align: 150%;
              padding: 0 2px 0 0;
              display: inline;
              }
              
              body[fix] .mobile_reset_block {
              display: inherit !important;
              }
              
              body[fix] .master_table_horizontal_spacing {
              width: 5px !important;
              }
              body[fix] .custom_ad img {
              max-width: 100% !important;
              height: auto !important;
              }
              body[fix] .medium_rectangle_container {
              max-width: 40% !important;
              }
              
              body[fix] .story_headline > * {
              line-height: 20px !important;
              }
              body[fix] .story_share_icon_separator {
              padding-left: 5px !important;
              }
              
              body[fix] .viral_row td:first-child {
              text-align: left !important;
              padding-left: 0 !important;
              }
              
              
              }
            </style>

Anyone else ever seen anything like this?

Redferret, 3 years ago

It's a tough one, I guess Lotus 8 only respects a single style tag, What devices are you targeting with that max-width? it's likely to get rendered by quite a few tablets


Gmail app apologist
freise29, 3 years ago

Just anything under 727px.

The nested query is because for some reason the max-width/max-device-width was making the media query trigger for ipad 2.

roshodgekiss roshodgekiss, 3 years ago

Hey there, the only thing amiss is the nested query, as you mentioned earlier. I'd be inclined to try and use -webkit-min-device-pixel-ratio or -webkit-max-device-pixel-ratio to control which iPad models trigger your media query instead. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098