<div class="container"> <!--Header--> <div class="header"> </div> <!--Header--> <!--Banner--> <div class="banner"> </div> <!--Banner--> <!--Wrapper--> <div class="wrapper"> <!--Block--> <div class="block"> </div> <!--Block--> <!--Block--> <div class="block"> </div> <!--Block--> <!--Block--> <div class="block"> </div> <!--Block--> <!--Block--> <div class="block"> </div> <!--Block--> </div> <!--Wrapper--> <!--Footer--> <div class="footer"> </div> <!--Footer--> </div>
@media screen and (min-width:1170px) { .container { width: 90%; margin: 0 auto; } .block { width: 23%; min-height: 200px; background-color: #2ecc71; float: left; margin: 0 1%; } } @media screen and (max-width:1170px) { .container { width: 85%; margin: 0 auto; } .block { width: 23%; min-height: 200px; background-color: #2ecc71; float: left; margin: 0 1%; } } @media screen and (max-width:768px) { .container { width: 98%; margin: 0 auto; } .block { width: 100%; min-height: 200px; background-color: #2ecc71; margin: 0px auto 20px 0px; } } body { margin: 0; padding: 0; } .header { width: 100%; min-height: 50px; background-color: #3498db; } .banner { width: 100%; min-height: 300px; background-color: #f1f1f1; } .wrapper { width: 100%; display: inline-block; margin: 40px 0px; } .footer { width: 100%; min-height: 50px; background-color: #2c3e50; }