3 Replies Latest reply on Nov 19, 2015 7:36 AM by slick_rick

    Why does my media query hide images in Design View?

    slick_rick

      I have an html email I have been using for some time. However, I need it to be able to be edited in Dreamweaver, by others not as familiar with editing code. It's been tested and renders correctly across many email clients and devices. However, in Dreamweaver, the images do not display when in "Design Mode". They do show in Live View and on browsers. But, the common man does not edit from there.  I went through the code, eliminating snippets of code and narrowed it down to a general CSS class:

      img[class="img-max"]{
                max-width: 600px !important;
                width: 100% !important;
                height:auto !important;
              }

       

      When I eliminate this, the images display. However, then the images are not nearly as fluid in the design! they are more choppy.

      I appreciate any help if anyone has had a similar issue.

      Thank you.

       

      -Befuddled Ben

        • 1. Re: Why does my media query hide images in Design View?
          BenPleysier Adobe Community Professional & MVP

          I can't replicate the problem. I am using DWCC2015 and this is what I get

           

          • 2. Re: Why does my media query hide images in Design View?
            Ken Binney Adobe Community Professional & MVP

            I'm surprised you are using CSS for an email.

            IMHO, the only "view" that is relevant is the display in an email client.

             

            CSS Support Guide for Email Clients | Campaign Monitor

            • 3. Re: Why does my media query hide images in Design View?
              slick_rick Level 1

              Ken and Ben,

               

              I am using a combination of media queries and in-line CSS. The inline styling assures the desktop layout is solid. Whereas the queries activate if a mobile esp supports them. Here is the code, a little watered down on content. The "Magic Code", is what I found affects the Design View in Dreamweaver (CS4). Others on the CC have also mentioned the issue. I need the images to preview in Design View. However, that "magic code" is pretty important regarding the overall responsiveness. I appreciate any insight or suggestions. Let me know if something else is needed.

               

              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

              <HTML>

                 <HEAD>

                    <TITLE>General Email</TITLE>

                    <META nl_http-equiv="Content-Type"

                       nl_content="text/html; charset=utf-8">

                    <META nl_content="width=device-width, initial-scale=1.0"

                       nl_name="viewport">

                    <META nl_nl_property="og:title"

                       content="<%=delivery.mailParameters.subject %>">

                    <META nl_http-equiv="content-type"

                       nl_content="text/html;charset=UTF-8">

                   <STYLE type=text/css>

                    /* Client-specific Styles */

                    #outlook a{padding:0;}

                    /* Force Outlook to provide a "view in browser" menu link. */

                    body{

                 width:100% !important; background-color:#e6e6e6; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}

                    /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */

                    .ExternalClass{width:100%;}/* Force Hotmail to display emails at full width */

                    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{

                 line-height: 100%;}

                    /* Force Hotmail to display normal line spacing. */

                    #backgroundTable{

                 margin:0; padding:0; width:100% !important;

                 line-height: 100% !important;}img{outline:none;

                 text-decoration:none;

                 border:none; -ms-interpolation-mode: bicubic;}

                 td.tab-hide{display: none!important;}

                 a img{border:none;}

                 .image_fix{display:block;}

                 p{margin: 0px 0px !important;}

                 table td{border-collapse: collapse;}

                 table{border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;}

                  

                 /*a{color: #e95353;text-decoration: none;text-decoration:none!important;}*/

                  

                    /* iOS BLUE LINKS */

                    .appleBody a {color:#000000; text-decoration: none;}

                    .appleFooter a {color:#ffffff; text-decoration: none;}   

               

               

                    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;

                    }

                    .appleLinksWhite, .appleLinksWhite a {

                 color: #ffffff !important;

                 text-decoration: underline;

                 color: #ffffff !important;

                 text-decoration: none;}

                 

                 

                    /*-- MAGIC CODE! --*/

                    td img{ height:auto !important; width:100% !important;}

                    /*-- MAGIC CODE! --*/

                  

                    /*################################################*/

                    /*IPAD STYLES*/

                    /*################################################*/

                    @media only screen and (max-width: 600px){a[href^="tel"], a[href^="sms"]{text-decoration: none; color: #000000; pointer-events: none; cursor: default;}

                    *[class*="tab-only"]{display: block !important; max-height: none !important;}.mobile_link a[href^="tel"], .mobile_link a[href^="sms"]{text-decoration: default; color: #000000 !important; pointer-events: auto; cursor: default;}

                    table.tabcenter{align:center;}.tabcenter{align:center;}

                    able[class=devicewidth]{width: 440px!important;text-align:center!important;}

                    table[class=devicewidthinner]{width: 420px!important;text-align:center!important;}

                    table[class=devicewidth3button]

                    {width: 440px!important;text-align:center!important;align:center!important;}

                    td[class="mobile-hide"]{display: none;}

                    table[class="devicewidthinner3button"]

                    {width: 250px!important;text-align:center!important;align:center!important;}

                    table[class="sthide"]{display: none!important;}

                    img[class="bigimage"]{width: 420px!important;height:219px!important;}

                    img[class="col2img"]{width: 420px!important;height:258px!important;}

                    img[class="image-banner"]{width: 440px!important;height:106px!important;}

                    td[class="menu"]{text-align:center !important; padding: 0 0 10px 0 !important;}

                    td[class="logo"]{padding:10px 0 5px 0!important;margin: 0 auto !important;}

                    td[class="buttonfont"]{font-size:20px!important;padding:18px 0px;important; line-height: 22px !important;}

                    table[class="buttonfont"]{width:320px!important;;}

                    td[class="tab-hide"]{display: none!important;}

                    img[class="logo"]{padding:0!important;margin: 0 auto !important;}

                  

                    table[class="mobile-hide"]{display: none;}

                    table[class="mobile-show"]{display:inline-block!important!;min-width:50px;}

                  

                    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;

                    }

                    }

                    /*##############################################*/

                    /*IPHONE STYLES*/

                    /*##############################################*/

                    @media only screen and (max-width: 480px){

                       img{max-width:320px!important}

                       *[class*="mobile-only"]{display: block !important; max-height: none !important;}

                       a[href^="tel"], a[href^="sms"]{text-decoration: none; color: #000000; pointer-events: none; cursor: default;}

                       .mobile_link a[href^="tel"], .mobile_link a[href^="sms"]{text-decoration: default; color: #000000 !important; pointer-events: auto; cursor: default;}

                       table[class="devicewidth"]{width: 320px!important;text-align:center!important;}

                       table[class="devicewidthinner"]{width: 98%!important;text-align:center!important;}

                       table[class=devicewidth3button]{width: 225px!important;text-align:center!important;}

                       table[class=devicewidthinner3button]{width: 260px!important;text-align:center!important;}

                       table[class="sthide"]{display: none!important;}

                       img[class="bigimage"]{width: 320px!important;height:136px!important;}

                       img[class="col2img"]{width: 320px!important;height:160px!important;}

                       img[class="image-banner"]{width: 320px!important;height:68px!important;}

                       td[class="buttonfont"]{font-size:16px!important;padding:10px 0px;important; line-height: 15px !important;}

                       td[class="mobile-text"]{font-size:12px!important;}

                       td[class="mobile-hide"]{display: none;}}

                  

                    @media only screen and (max-width: 480px){img{max-width: 400px !important;}

                      td[class="mobile-hide"]{display: none;}

                      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;

                    }

                    table [class="mobile-show"]{display:inline-block!important!;max-width: 15px;}

                    }

                    @media only screen and (max-width: 350px){img{max-width: 320px !important;}td[class="mobile-hide"]{display: none;}

                      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;

                    }

                  

                    </STYLE>

                   <META name=GENERATOR content="MSHTML 10.00.9200.17357">

                 </HEAD>

                 <BODY bgcolor=#e6e6e6>

                    <!-- ===========

                    MIRROR TEXT SECTION

                    =============== -->

                    <DIV class="block">

                       <TABLE id=backgroundTable cellSpacing=0 cellPadding=0 width="100%" border=0

                          st-sortable="preheader">

                          <TBODY>

                             <TR>

                                <TD width="100%">

                                   <TABLE class="devicewidth" cellSpacing=0 cellPadding=0 width=600

                                      align=center border=0>

                                      <TBODY>

                                         <TR>

                                            <TD

                                               style="FONT-SIZE: 12px; FONT-FAMILY: Helvetica, Arial, sans-serif; COLOR: #95a5a6; PADDING-BOTTOM: 5px; PADDING-top: 5px; TEXT-ALIGN: center"

                                               vAlign=middle width="100%" align=center

                                               st-content="preheader">Additional Text Here </TD>

                                         </TR>

                                         <TR>

                                            <TD

                                               style="FONT-SIZE: 12px; FONT-FAMILY: Helvetica, Arial, sans-serif; COLOR: #95a5a6; PADDING-BOTTOM: 10px; TEXT-ALIGN: center"

                                               vAlign=middle width="100%" align=center st-content="preheader">personalization text here

                                            </TD>

                                         </TR>

                                      </TBODY>

                                   </TABLE>

                                </TD>

                             </TR>

                          </TBODY>

                       </TABLE>

                       </DIV>

                     <!-- =============

                     MARGIN WRAP Starts

                     ================ -->

                                <table cellpadding=0 cellspacing=0 align="center" style="border:solid 1px #e6e6e6;background-color: #e6e6e6">

                                   <tbody>

                                      <tr>

                                         <td  style="max=width:600px;text-align:center;">

                                          <!-- MARGIN SPACE Table Starts -->

                                            <table  cellpadding=10 cellspacing=0 align="center" bgcolor=#ffffff>

                                               <!-- border in this section above border=1  border-color=%e6e6e6 -->

                                               <tbody>

                                                  <tr>

                                                     <td style="padding:20px;border:1px solid #e6e6e6;">

                                                      

                                                     <!--===================

                                                     HEADER SECTION

                                                     ===================-->

                                                     <DIV class="block">

                                                        <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 style="border-collapse: collapse;">

                                                           <TBODY>

                                                              <TR>

                                                                 <TD

                                                                    style="PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px;"

                                                                    vAlign=bottom>

                                                                    <TABLE class="devicewidth" style="MAX-WIDTH: 600px; MIN-WIDTH: 290px;border-collapse: collapse;" bgcolor=#ffffff

                                                                       cellSpacing=0 cellPadding=0 align=center border=0>

                                                                       <TBODY>

                                                                          <TR>

                                                                             <TD vAlign=bottom width="100%">

                                                                                <TABLE class="devicewidth" cellSpacing=0 cellPadding=0 align=center style="border-collapse: collapse;"

                                                                                   border=0>

                                                                                   <TBODY>

                                                                                      <TR align=center vAlign=top>

                                                                                         <TD style="TEXT-ALIGN: center;" vAlign=bottom align=center>

                                                                                            <!--==================HEADER GRAPHIC==================-->

                                                                                            <a href="#" target="_blank" style="text-decoration: none;border: none;"><IMG style="OUTLINE-STYLE: none; TEXT-DECORATION: none; color:#ffffff; text-align: center;font-size:14px;" border=0

                                                                                               alt="Header Image" src="http://neweratickets61-t.neolane.net/res/neweratickets/6cdf7fde1398d9b2ec9ce67905a5b506.jp g"></a>

                                                                                         </TD>

                                                                                      </TR>

                                                                                   </TBODY>

                                                                                </TABLE>

                                                                             </TD>

                                                                          </TR>

                                                                       </TBODY>

                                                                    </TABLE>

                                                                 </TD>

                                                              </TR>

                                                            

                                                           </TBODY>

                                                        </TABLE>

                                                     </DIV>

                                                     <!--===================

                                                     MAIN IMAGE SECTION

                                                     ===================-->

                                                     <DIV class="block">

                                                        <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

                                                           <TBODY>

                                                              <TR>

                                                                 <TD style="PADDING-TOP: 0px" vAlign=top>

                                                                    <TABLE class="devicewidth" cellSpacing=0 cellPadding=0 align=center

                                                                       border=0>

                                                                       <TBODY>

                                                                          <TR>

                                                                             <TD vAlign="top" style="padding:15px 0px;">

                                                                                <TABLE class="devicewidthinner"

                                                                                   style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: white"

                                                                                   cellSpacing=0 cellPadding=0 width=600 align=center border=0>

                                                                                   <TBODY>

                                                                                      <TR>

                                                                                         <TD

                                                                                            style="FONT-SIZE: 18px; FONT-FAMILY: Helvetica, Arial, sans-serif; TEXT-TRANSFORM: uppercase; FONT-WEIGHT: bold; COLOR: #cb001d; PADDING-BOTTOM: 10px; TEXT-ALIGN: center; PADDING-TOP: 10px; PADDING-LEFT: 10px; LINE-HEIGHT: 20px; PADDING-RIGHT: 10px; WIDTH: 80%; BACKGROUND-COLOR: white"

                                                                                            st-title="rightimage-title">nec in accusam legendos conse

                                                                                            tetur legimus

                                                                                         </TD>

                                                                                      </TR>

                                                                                      <TR>

                                                                                         <TD

                                                                                            style="FONT-SIZE: 15px; FONT-FAMILY: Helvetica, Arial, sans-serif; COLOR: #000000; PADDING-BOTTOM: 10px; TEXT-ALIGN: left; PADDING-TOP: 5px; PADDING-LEFT: 5px; LINE-HEIGHT: 18px; PADDING-RIGHT: 5px"

                                                                                            st-content="3col-para1">Lorem ipsum dolor sit amet, ut labore

                                                                                            et magna aliqua dolor sit amet, ut labore et magna aliqua

                                                                                            dolor ut labore et magna. Lorem ipsum dolor sit amet, ut labore

                                                                                            et magna aliqua dolor sit amet, ut labore et magna aliqua

                                                                                            dolor ut labore et magna...

                                                                                         </TD>

                                                                                      </TR>

                                                                                   </TBODY>

                                                                                </TABLE>

                                                                             </TD>

                                                                          </TR>

                                                                       </TBODY>

                                                                    </TABLE>

                                                                 </TD>

                                                              </TR>

                                                           </TBODY>

                                                        </TABLE>

                                                     </DIV>

                                                     <!--===========

                                                     BANNER AD

                                                     ==========-->

                                                     <DIV class="block">

                                                        <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

                                                           <TBODY>

                                                              <TR>

                                                                 <TD vAlign=top>

                                                                    <TABLE class="devicewidth" style="MAX-WIDTH: 600px; MIN-WIDTH: 290px"

                                                                       cellSpacing=0 cellPadding=0 align=center border=0>

                                                                       <TBODY>

                                                                          <TR>

                                                                             <TD vAlign=top width="100%" style="PADDING-TOP: 10px;">

                                                                                <TABLE class="devicewidth" cellSpacing=0 cellPadding=0 align=center

                                                                                   border=0>

                                                                                   <TBODY>

                                                                                      <TR align=center vAlign=top>

                                                                                         <TD style="TEXT-ALIGN: center" vAlign=top align=center>

                                                                                            <!--==================BANNER AD==================-->

                                                                                            <IMG style="OUTLINE-STYLE: none; TEXT-DECORATION: none" border=0

                                                                                               alt="banner ad" src="http://neweratickets-t.neolane.net/res/net/393fd77a79a0ed943298e0321e427acc.jpg">

                                                                                         </TD>

                                                                                      </TR>

                                                                                   </TBODY>

                                                                                </TABLE>

                                                                             </TD>

                                                                          </TR>

                                                                       </TBODY>

                                                                    </TABLE>

                                                                 </TD>

                                                              </TR>

                                                           </TBODY>

                                                        </TABLE>

                                                     </DIV>

                                                    <!--===========

                                                    SOCIAL MEDIA SECTION

                                                    ==========-->

                                                     <DIV class="block">

                                                        <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

                                                           <TBODY>

                                                              <TR>

                                                                 <TD vAlign=top>

                                                                    <TABLE class="devicewidth" style="MAX-WIDTH: 600px; MIN-WIDTH: 290px;BACKGROUND-COLOR: #2d2d2d;"

                                                                       cellSpacing=0 cellPadding=0 align=center border=0>

                                                                       <TBODY>

                                                                          <TR>

                                                                             <TD vAlign="top">

                                                                                <TABLE class="devicewidthinner"

                                                                                   style="BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #2d2d2d;text-transform: uppercase;"

                                                                                   cellSpacing=0 cellPadding=0 width=600 align=center border=0>

                                                                                   <TBODY>

                                                                                      <TR>

                                                                                         <TD  style="FONT-SIZE: 21px; FONT-FAMILY: Helvetica, Arial, sans-serif; COLOR: #ffffff;TEXT-ALIGN: center;  PADDING-BOTTOM: 0px; PADDING-TOP: 10px; PADDING-LEFT:0px; LINE-HEIGHT: 22px; PADDING-RIGHT: 0px"

                                                                                            st-content="3col-para1"><span class="appleFooter" style="color:#ffffff;font-weight: bold;"></span>Buy tickets<br>866.555.5555</span>

                                                                                         </TD>

                                                                                      </TR>

                                                                                    

                                                                                   </TBODY>

                                                                                </TABLE>

                                                                             </TD>

                                                                          </TR>

                                                                          <TR>

                                                                             <TD >

                                                                                <TABLE class="devicewidth" cellSpacing=0 cellPadding=0 width=600

                                                                                   align=center bgColor=#2d2d2d border=0>

                                                                                   <TBODY>

                                                                                       <TR><TD height=15 width="100%"> </TD></TR>

                                                                                      <TR>

                                                                                         <TD style="PADDING-TOP: 5px;PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #2d2d2d;">

                                                                                            <TABLE class="devicewidth tabcenter"

                                                                                               style="TEXT-ALIGN: center; MARGIN: 0px auto" cellSpacing=0

                                                                                               cellPadding=0 width="290" align=center border=0>

                                                                                               <TBODY>

                                                                                                  <TR>

                                                                                                     <TD height=5 width="6%">  </TD>

                                                                                                     <TD style="TEXT-ALIGN: right; MARGIN: 0px 3px"

                                                                                                        width="20%"><a href="https://www.facebook.com" target="_blank" style="text-decoration: none;border: none;">

                                                                                                            <IMG style="WIDTH: 65px" border=0

                                                                                                        alt=facebook src="http://neweratickets-t.neolane.net/res/net/1a6eb5cb56066a5a04b8ac48916ed79e.png"></a></TD>

                                                                                                     <TD height=5 width="5%"></TD>

                                                                                                     <TD style="TEXT-ALIGN: right; MARGIN: 0px 3px"

                                                                                                        width="20%"><a href="https://twitter.com" target="_blank" style="text-decoration: none;border: none;">

                                                                                                            <IMG style="WIDTH: 65px" border=0

                                                                                                        alt=twitter src="http://neweratickets-t.neolane.net/res/net/32525cd34d9c9b8abcb951194113d2cc.png"></a></TD>

                                                                                                     <TD height=5 width="5%"></TD>

                                                                                                     <TD style="TEXT-ALIGN: right; MARGIN: 0px 3px"

                                                                                                        width="20%"><a href="https://instagram.com" target="_blank" style="text-decoration: none;border: none;">

                                                                                                            <IMG style="WIDTH: 65px" border=0

                                                                                                        alt=instagram src="http://neweratickets-t.neolane.net/res/net/074aa10d4398bde2ded038259b91a5d7.png"></a></TD>

                                                                                                     <TD height=5 width="5%"></TD>

                                                                                                     <TD style="TEXT-ALIGN: right; MARGIN: 0px 3px"

                                                                                                        width="20%"><a href="https://www.youtube.com" target="_blank" style="text-decoration: none;border: none;">

                                                                                                            <IMG style="WIDTH: 65px" border=0

                                                                                                        alt="you tube" src="http://neweratickets-t.neolane.net/res/net/797b0775b9212bb2aefb2d86070c08a3.png"></a></TD>

                                                                                                     <TD height=5 width="6%">

                                                                                                     </TD>

                                                                                                  </TR>

                                                                                               </TBODY>

                                                                                            </TABLE>

                                                                                         </TD>

                                                                                      </TR>

                                                                                      <TR><TD style="FONT-SIZE: 1px; LINE-HEIGHT: 1px; mso-line-height-rule: exactly" height=15> </TD></TR>

                                                                                   </TBODY>

                                                                                </TABLE>

                                                                             </TD>

                                                                          </TR>

                                                                          <TR>

                                                                             <TD width="100%">

                                                                                <TABLE class="devicewidth" cellSpacing=0 cellPadding=0 width=600

                                                                                   align=center border=0>

                                                                                   <TBODY>

                                                                                      <TR>

                                                                                         <TD

                                                                                            style="FONT-SIZE: 12px; FONT-FAMILY: Helvetica, Arial, sans-serif; COLOR: #ffffff; PADDING-BOTTOM: 10px; TEXT-ALIGN: center"

                                                                                            vAlign=middle width="100%" align=center st-content="preheader">Insert Subscription Text Here

                                                                                         </TD>

                                                                                      </TR>

                                                                                   </TBODY>

                                                                                </TABLE>

                                                                             </TD>

                                                                          </TR>

                                                                       </TBODY>

                                                                    </TABLE>

                                                                 </TD>

                                                              </TR>

                                                           </TBODY>

                                                        </TABLE>

                                                     </DIV>

                                                  <!-- =================

                                                  MARGIN WRAP ENDs

                                                  ==================== -->

                                               </td>

                                            </tr>

                                         </tbody>

                                   </table>

                                </td>

                             </tr>

                       </tbody>

                    </table>

                  

                 </BODY>

              </HTML>