Monday, 29 August 2016

Fully Responsive Footer For css

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,700');

*{
    padding:0;
    margin:0;
}

html{
    background-color: #eaf0f2;
}

body{
    font:14px/1.5 Arial, Helvetica, sans-serif;
}

@media (max-height:800px){
    footer { position: static; }
   
}
.footer-distributed{
    background-color: #E83556;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: bold 16px sans-serif;

    padding: 55px 50px;
    margin-top: 0px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center1,
.footer-distributed .footer-center2,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;
    width: 22%;
    text-align:right;
    margin-right:10px;
    position: relative;
   
}
/* Footer */


.imagediv {
    text-align: right;
    width: 40%;
    float:left;
}
.image {
    width: 50%;
}
.content {
    text-align: left;
    width: 50%;
    color: white;
    font-size:12px;
    float:right;
}



@media (max-width: 880px) {

.footer-distributed{
    background-color: #E83556;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font: bold 16px sans-serif;

    padding: 55px 50px;
    margin-top: 0px;
}

    .footer-distributed .footer-left,
    .footer-distributed .footer-center1,
    .footer-distributed .footer-center2,
    .footer-distributed .footer-right{
        display: inline-block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

   
   

    .footer-distributed .footer-center i{
        margin-left: 0;
    }

}