Codxplore.com

Latest news:

New android application Islamic Video has been released. its a free islamic video application for android smartphone. Download now!

Responsive css design techniques


Responsive css design techniques

Using the css media we can design a responsive template for all devices such as any smart phone or tablet.

there is no specefic width or heighr for responsive design , you can do it by your self . but there is some recommended width i will mention here.this will help you to create any responsive template

for example :

@media (max-width: 480px) {
    .row .left{
        padding-top: 2px;
        padding-right: 2px;
        padding-left: 2px;
    }
    .marketing .span4 {
        margin-left:0px;
        width:auto;
    }
    .exampleDivClass{
        top: 37%;
        right:10%;
    }
}

@media (max-width: 767px) {
    .marketing .span4 {
        margin-left:0px;
        width:auto;
    }
    .exampleDivClass{
        top: 37%;
        right:10%;
    }
}


@media (max-width: 767px) {
    .marketing .span4 {
        margin-left:0px;
        width:auto;
    }
    .row .left{
        padding-left: 15px;
    }
    .exampleDivClass{
        top: 37%;
        right:10%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .marketing .span4 {
        margin-left:0px;
        width:auto;
    }
    .exampleDivClass{
        top: 37%;
        right:10%;
    }
}

@media (max-width: 979px) {
    .marketing .span4 {
        margin-left:0px;
        width:auto;
    }
}

@media (min-width: 980px) {
   .marketing .span4 {
        width:280px;
    }
}
@media (min-width: 1200px) {
    .marketing .span4 {
        width:360px;
    }
}

thats all. thanks dude :D 

Tags :

Views : 716

Subscribe Us


Follow Us