Skip navigation
btvbillb
Currently Being Moderated

3 columns in fluid grid issue

May 18, 2012 7:29 AM

Tags: #dreamweaver #cs6 #fluid_grid

I followed a video tutorial that shows how to create 3 columns. You are instructed to create a div as a new row and then add two more divs to that row and then drag the divs to a value of 4 each. The next div row to be created would be for a footer, etc. When viewed on a desktop all of this looks fine. The issue is that when resized down to mobile size, column 2 and 3 are indented over a bit (see below). I have tried creating three divs (each in their own row) with a span of 4 each but they won't all float together in one row. Any solutions for this? Thanks.

 

Desktop

Capture.JPG

 

Mobile

Capture.JPG

 
Replies
  • Currently Being Moderated
    May 18, 2012 9:19 AM   in reply to btvbillb

    It's hard to say without seeing your code. But I'll hazard a wild guess that your mobile CSS needs that section to have

    float:none;

    padding:0;

    margin:0.

    display:block;

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 18, 2012 9:40 AM   in reply to btvbillb

    That's not enough to go on.  CSS cascades.  We would need to see the Desktop, Tablet and Mobile CSS code as well as your HTML

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 18, 2012 10:23 AM   in reply to btvbillb

    You've still got left marigins on the below <divs> once you go to a one column layout, that is causing the indent.

     

     

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

     

    #LayoutDiv3 {

        clear: none;

        float: left;

        margin-left: 1.0989%;

        width: 32.6007%;

        display: block;

    }

    #LayoutDiv4 {

        clear: none;

        float: left;

        margin-left: 1.0989%;

        width: 32.6007%;

        display: block;

    }

     

     

    You might want to look at this tutorial its better in my opinion than what you are following:

     

    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media -queries

     

    Alistapart (if that's where you are learning from) are a bit up their own backsides in my opinion and don't really cater for beginners.

     
    |
    Mark as:

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