0 Replies Latest reply on Apr 11, 2015 2:06 PM by laurac59811532

    Fluid grid tablet: hidden divs show when live

    laurac59811532

      I'm new to fluid grid layouts, but I'm using Dreamweaver CS6 and I understand that the mobile CSS trickles down to tablet and then to desktop. However I thought I could hide divs by adding display:none; to the CSS code in the tablet view. When I do that it works fine in edit mode. Looks exactly right. But when I check the live and browser views the hidden div is clearly visible For example:


      I have 3 divs and I want each to be visible in only one view.


      Div 1 = #mobile

      Div 2 = #tablet

      Div 3 = #desktop


      I do this in the CSS:

       

      /* Mobile Layout: 480px and below. */

       

      #mobile  {

        clear: both;

        float: left;

        margin-left: 0;

        width: 100%;

        display: block;

      }

      #tablet  {

          display:none;

      }

      #desktop  {

          display:none;

      }

       

      /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

      @media only screen and (min-width: 481px) {

       

      #tablet  {

        clear: both;

        float: left;

        margin-left: 0;

        width: 100%;

        display: block;

      }

      #mobile  {

          display:none;

      }

      #desktop  {

          display:none;

      }

      }

      /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

      @media only screen and (min-width: 769px) {

       

      #desktop{

        clear: both;

        float: left;

        margin-left: 0;

        width: 100%;

        display: block;

      }

      #tablet  {

          display:none;

      }

      #mobile  {

          display:none;

      }

      }

       

      Everything looks fine in edit mode. But when I view it live, mobile is fine, desktop is fine, but the tablet view includes everything from the mobile view even though it's not supposed to display.

       

      What am I doing wrong? Any help is greatly appreciated and I can add my actual code if need be.

       

      Thank you!