7 Replies Latest reply: Jan 17, 2013 1:00 PM by New flash user RSS

    Fluid Grids / div tags / fixed headers / hidden divs on mobile view

    New flash user Community Member

      I am using Dreamweaver CS6 fluid grids system to build a new site.  I would like a little help on the use of the system.  I have few questions.

       

      1.   Will I have problems if I make a div tag that is fixed outside the grid container and above it.  I need an area that does not move when you scrolled up and down in the browser.  Example.  A nav bar that stays in place as people scroll your pages.  Will this give me browser display problems or damage the fluid grids factory set modernizer css styles? 

       

       

      How do you remove content for the moblie view.

       

      2.   I want certain items to not show once a browser resizes to a mobile view.  The css property hidden does not seem to work to hide pictures or text what is the best way to do this?

            How do you control the fluid grid display based on the browser size used?  How do you find the correct CSS that controls the display once the page shrinks or is it not controllable?

       

       

       

      ALSO HERE IS A NOTE FOR ADOBE. 

       

      MASTER COLLECTION BUYERS SHOULD GET THE SAME ITEMS THAT CLOUD USERS GET UNTIL YOU CHANGE VERSIONS WHICH IS SUPPOSED TO BE EVERY 2 YEARS.  I HAVE PAID YOU GUYS $1000.00s  OF DOLLARS AND SHOULD RECEIVE IMPROVEMENTS  UNTIL YOU RELEASE A NEW VERSION SUCH AS CS7.  YOU GUYS HAVE MADE YOUR SOFTWARE RELEASES OBSOLETE AS SOON AS THEY GO UP FOR SALE.  I LOVE YOUR SALES LINE "OH YOU BOUGHT THE CURRENT SOFTWARE BUNDLE AT "THE" TIME IT WAS MADE AND IT HAS SINCE CHANGED" even though I bought it 9 months after its release date.  I should get more improvements than your release.  Dreamweaver has issues and your fluid grids system needs people using it so you can make it better for everyone to use.   Do you guys just want to SELL the next version and not support what you have already SOLD? 

       

      Dont put sales marketing above SUPPORT for us. 

        • 1. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
          SnakEyez02 CommunityMVP

          1. No. This shouldn't be an issue just place the fixed element outside the fluid grid.

           

          2.  Just set the display to none for the element(s) you don't want to show.  Setting the visibility to hidden just hides it from sight but leaves it in the flow of the element whereas display none, hides it from sight and takes it out of the flow.

           

          Note: Adobe doesn't care.  I agree with you to an extent, but I don't use the video programs so I feel like my money in the Cloud is not being properly allocated if I have to support development of programs I don't need and I can't get the smaller collections in the Cloud, it's all or piece-by-piece which is too expensive.  The current version is supported though.  They are supporting 2 versions simultaneously which gets confusing because they called changing Menu text an "upgrade".  That one will continue to puzzle me.

          • 2. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
            New flash user Community Member

            SnakEyez02,

             

            Thanks for the quick response. 

            • 3. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
              New flash user Community Member

              Set the display to none does not effect it either.  It seems the fluid grid wants to resize and shrink the image and not remove it.

              • 4. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
                Nancy O. CommunityMVP

                Use media queries to target specific device widths. 

                 

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

                /**special conditions for mobile layout**/

                #divName {display:none}

                }

                 

                 

                Nancy O.

                • 5. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
                  New flash user Community Member

                  Adobes fluid grid does its media queries.  In the boiler plate file the following can be found

                   

                  /* ==|== non-semantic helper classes ========================================

                     Please define your styles before this section.

                     ========================================================================== */

                   

                  /* For image replacement */
                  .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
                  .ir br { display: none; }

                   

                  /* Hide from both screenreaders and browsers: h5bp.com/u */
                  .hidden { display: none !important; visibility: hidden; }

                   

                  /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
                  .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

                   

                  my elements name is logo

                   

                  So in my fluidgrid.css page

                   

                  Here is one example of the code I have tried.

                   

                  .hidden #logo {

                  clear: both;

                  float: left;

                  margin-left: 0;

                  width: 100%;

                  display: none

                  }

                   

                  I have tried it as #logo.hidden

                   

                  I have removed the display:block property.

                   

                  I seems that no matter how I structure the code the element is still visiable when i preview it in Iexplore?

                  • 6. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
                    Nancy O. CommunityMVP

                    Don't concern yourself with boilerplate.css.

                     

                    display:none = don't display this.

                    display:block = displayed this.

                     

                    #logo {

                    display:none;

                    clear: both;

                    float: left;

                    margin-left: 0;

                    width: 100%;

                    display: block

                    }

                     

                    HTML:

                     

                    <div id="logo">Your logo goes here</div>

                     

                    For better answers, you'll need to upload your page & support files to a public web space you control and post the URL.

                     

                     

                    Nancy O.

                    • 7. Re: Fluid Grids / div tags / fixed headers / hidden divs on mobile view
                      New flash user Community Member

                      It seems when I delete all lines and just have the CSS

                       

                      }

                      #logo {

                      display:none

                      }

                       

                       

                      it removes the item from view when the browser window is down sized to the mobile view.  AWESOME.  I have spent 5 hours tring to get to get items to go away.

                       

                      For some reason the other CSS caused it to display

                       

                      Thanks