0

I have some basic css 2 column layout. It works fine for desktop browser resize as it is liquid layout.

Here is my code:

HTML:

  <div id="wrapper">
        <div id="headerwrap">
        <div id="header">
            <p>Header Part</p>
        </div>
        </div>
        <div id="contentliquid"><div id="contentwrap">
        <div id="content">
            <p>This is the Body/content Part</p>
            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

            <div class="test">
            </div>

        </div>
        </div></div>
        <div id="leftcolumnwrap">
        <div id="leftcolumn">
            <p>This is the Left Column</p>

        </div>
        </div>
        <div id="footerwrap">
        <div id="footer">
            <p>@copyright xyz Corporation</p>

        </div>
        </div>
    </div>

CSS:

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    color:#333
}

p {
    padding: 10px;
}


#wrapper {
    width: 100%;
    min-width: 1000px;
    max-width: 2000px;
    margin: 0 auto;
}

#headerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
}

#header {
    height: 75px;
    background: silver;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

#contentliquid {
    float: left;
    width: 100%;
}

#contentwrap {
    margin-left: 250px;
    float: left;
}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

#leftcolumnwrap {
    width: 250px;
    margin-left: -100%;
    float: left;
}

#leftcolumn {
    background: silver;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

#footerwrap {
    width: 100%;
    float: left;
    margin: 0 auto;
    clear: both;
}

#footer {
    height: 40px;
    background: silver;
    border-radius: 10px;
    border: 1px solid black;
    margin: 5px;
}

.test{

height:200px;
width:200px;
border: 1px solid black;
margin-left: 5px;
margin-top: 10px;
display : inline-block;
}

Link of working Fiddle is : http://jsfiddle.net/FVLMX/324/ How can it works in the mobile devices/ i-phones/ tablets with media queries or viewport.

What all are basic changes required ?

user3177233
  • 269
  • 1
  • 2
  • 10

2 Answers2

1

user 

@media (min-resolution: 480px) {

}

for PHYSICALLY SMALL DEVICES, PHYSICALLY LARGE DEVICES and MEDIUM-SIZED DEVICES have a look at

Responsive Web Design With Physical Units

Recommended widths for responsive layouts

Community
  • 1
  • 1
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • so the whole css is need to be change for this particular resolution or it will automatically adjust according to the mobile devices – user3177233 Apr 07 '14 at 06:22
1

For Smart Phones

@media only screen and (min-width:320px) and (max-width:480px) {|
}

For Tabs

@media only screen and (min-width:768px) and (max-width:1024px) {
}

Take a Look at this tool. http://www.responsinator.com/ Very Helpful for responsive Development. Else if you are using Mozilla Firefox, press Shift+Ctrl+M . This will give you various screen size for responsive web development.

Good Luck

uttamcafedeweb
  • 73
  • 1
  • 10