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

    Responsive Design/Grid Question

    dstoltz007 Newcomer

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




      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:




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



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

          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:




          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 


          • 2. Re: Responsive Design/Grid Question
            dstoltz007 Newcomer

            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>



            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 Newcomer

              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. Legend

                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.

                1 person found this helpful
                • 5. Re: Responsive Design/Grid Question
                  dstoltz007 Newcomer

                  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. Legend

                    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 Newcomer

                      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...