7 Replies Latest reply: Jun 27, 2012 12:29 PM by dstoltz007 RSS

    Responsive Design/Grid Question

    dstoltz007 Community Member

      I'm using the fluid grid design, and my mobile layout has 5 columns, and some DIVS added - see below:

       

      Capture1.JPG

       

      I'm trying to get my "LEFT PANE" using 2 columns, and my "RIGHT PANE" using 3 columns to the right of the left pane. You can see they are side by side above, but the right pane only takes up 2 columns.

       

      As soon as I make the RIGHT COLUMN stretch to 3 columns, it moves it down below the left column, like below:

       

      Capture2.JPG

       

      What am I doing wrong? Any help/tips/direction appreciated!

       

      Thanks!

        • 1. Re: Responsive Design/Grid Question
          Nancy O. MVP

          Offhand, I'd say you're not keeping your LayoutDivs inside the GridContainer Div.  And your floated LayoutDivs are too wide to fit on the same row. There should be some gutter space between them. See screenshot below:

           

          CS6FluidGrid.jpg

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          • 2. Re: Responsive Design/Grid Question
            dstoltz007 Community Member

            Thanks for the reply....my div's are definitely within the grid:

             

            <div class="gridContainer clearfix">

              <div id="header">THIS COULD BE THE HEADER</div>

              <div id="nav">NAVIGATION</div>

              <div id="leftside">LEFT PANE</div>

              <div id="rightside">RIGHT PANE</div>

              <div id="footer">FOOTER</div>

            </div>

             

            And when I drag the handles for a div to shrink or stretch it, it automatically "snaps" to the nearest column, and as you can see in my screen shot above, it stretches over the "gutter"....I can't seem to control this..?

             

            Thanks again for any more info.

            • 3. Re: Responsive Design/Grid Question
              dstoltz007 Community Member

              Anyone know why my columns by default extend over gutters, or should I say, the width does not seem to be set correctly?

              • 4. Re: Responsive Design/Grid Question
                Nancy O. MVP

                Why don't you start over with a new fluid grid layout and try changing your primary settings a bit?  I like to work with even numbers of columns. 

                 

                 

                Nancy O.

                • 5. Re: Responsive Design/Grid Question
                  dstoltz007 Community Member

                  Nancy - thanks,

                   

                  I tried using a new grid with 4 columns for mobile, and they are correctly snapping to the columns now. Not sure why the odd number of columns wasn't working...but even in that instance, if I switched to the tablet view, which used 8 columns, the div's extended over the gutters...

                   

                  In any case - thanks for your replies - I keep playing with it....

                   

                  BTW - Do you think more people will opt for this fluid/responsive design instead of designing dedicated mobile versions of their sites?

                  • 6. Re: Responsive Design/Grid Question
                    Nancy O. MVP

                    I've been using CSS Media Queries (although not fluid) for some time now.  I don't see any upside in maintaining separate web sites for Desktops/Laptops & Mobiles, do you?

                     

                    Nancy O.

                    • 7. Re: Responsive Design/Grid Question
                      dstoltz007 Community Member

                      The only upside I see is keeping the sites "isolated" from each other, if that's desired....My issue is I'm not a CSS expert, and I'm somewhat intimidated by all the CSS changes, hacks, cross-browser support, etc...

                       

                      Some big places still use mobile detection with redirection, like digg.com....on my mobile I get pushed to m.digg.com - I don't know what their reasons are, but I guess some places certainly do it.

                       

                      I'm very excited about the responsive design support in DW CS6....it does a lot of the media quires stuff for you, and I only need to worry about the CSS styling, more or less...