Skip navigation
dstoltz007
dstoltz007
Currently Being Moderated

Responsive Design/Grid Question

Jun 25, 2012 9:37 AM

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!

746 Views   7 Replies   Latest reply: dstoltz007, Jun 27, 2012 12:29 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Jun 25, 2012 11:14 AM   in reply to dstoltz007
    Report

    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/

     
    |
    Mark as:
  • dstoltz007
    Currently Being Moderated
    2. dstoltz007,
    Jun 25, 2012 11:28 AM   in reply to Nancy O.
    Report

    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.

     
    |
    Mark as:
  • dstoltz007
    Currently Being Moderated
    3. dstoltz007,
    Jun 27, 2012 6:09 AM   in reply to dstoltz007
    Report

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

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    4. Nancy O.,
    Jun 27, 2012 10:39 AM   in reply to dstoltz007
    Report

    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.

     
    |
    Mark as:
  • dstoltz007
    Currently Being Moderated
    5. dstoltz007,
    Jun 27, 2012 11:59 AM   in reply to Nancy O.
    Report

    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?

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    6. Nancy O.,
    Jun 27, 2012 12:17 PM   in reply to dstoltz007
    Report

    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.

     
    |
    Mark as:
  • dstoltz007
    Currently Being Moderated
    7. dstoltz007,
    Jun 27, 2012 12:29 PM   in reply to Nancy O.
    Report

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

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points