Question

I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.

I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.

Here is my css or less css to be precise

html, body {
height: 100%;
//overflow: hidden;
}

body {
min-width: 360px;
background-color: #ffffff;

#page {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.right {
    position: relative;
    right: 0;
}

// Extend column system (from defaults/layout.css)
.row {
    clear: both;

    > .container {
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 2% 0 2%;

        .container {
            max-width: 100%;
            padding-left: 0;
            padding-right: 0;

            &.one {
                width: 8%;
            }
            &.two {
                width: 16%;
            }
            &.three {
                width: 25%;
            }
            &.four {
                width: 33%;
            }
            &.five {
                width: 41%;
            }
            &.six {
                width: 50%;
            }
            &.seven {
                width: 58%;
            }
            &.eight {
                width: 66%;
            }
            &.nine {
                width: 75%;
            }
            &.ten {
                width: 83%;
            }
            &.eleven {
                width: 91%;
            }
            &.twelve {
                width: 100%;
            }

        }
    }
}

}



/*Collapse columns*/
@media only screen and (max-width: 740px) {

.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
    //width: auto;
    //float: none;
    //clear: both;
    margin-right: 0;
}

.column.third {
    display: none;
}

.column.second {
    width: 77%;
}

.column.first {
    //min-width: 180px;
}

}

Answer 1

http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/