www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/115/css/responsive.css
@media only screen and (min-width: 980px) and (max-width: 1199px){ /*====================== HOME SLIDER ======================*/ #home_slider .text{ width: 870px; } #home_slider .left{ width: 450px; padding-left: 150px; } #home_slider .right{ width: 270px; } /*====================== SERVICES ======================*/ .services > .span3{ float: none; margin-bottom: 50px; width: 940px; } .services .home_services{ border-right: none; padding-right: 0; } .services .home_services li{ float: left; border: none; width: 292px; margin-right: 30px; border-right: 1px solid #ededed; } .services .home_services li.last{ margin-right: 0; border-right: none; } .services > .span9{ float: none; width: 940px; } .services > .span9 .span6{ width: 700px; } .services > .span9 .span2{ width: 220px; } .services > .span9 .span2 .box{ padding: 26px 25px; } /*====================== LATEST BLOG ======================*/ .latest-blog .wrapper{ margin-top: 10px; } .latest-blog .wrapper li{ font-size: 9px; } /*====================== BLOG ======================*/ .entry{ padding-bottom: 50px; margin-bottom: 50px; } /*====================== copyright ======================*/ #copyright{ width: 1000px; } } @media (min-width: 768px) and (max-width: 979px) { /*====================== CONTAINER ======================*/ .container{ padding: 0 20px; } /*====================== HOME SLIDER ======================*/ #home_slider .text{width: 654px;} #home_slider .left{ width: 500px; padding-left: 100px; } #home_slider .right{width: 250px;} /*====================== MENU ======================*/ #menu{display: none;} .responsive-menu{ margin-top: 10px; display:block; float: right; width:75%; border: 1px solid #c4c4c4; } /*====================== SERVICES ======================*/ .services > .span3{ float: none; margin-bottom: 50px; width: 724px; } .services .home_services{ border-right: none; padding-right: 0; } .services .home_services li{ float: left; border: none; width: 220px; margin-right: 30px; border-right: 1px solid #ededed; } .services .home_services li.last{ margin-right: 0; border-right: none; } .services > .span9{ float: none; width: 724px; } .services > .span9 .span3{ float: none; width: 724px; margin-bottom: 20px; } .services > .span9 .span6{width: 724px;} .services > .span9 .span2{width: 228px;} .services > .span9 .span2 .box{padding: 35px 25px;} /*====================== PORTFOLIO ======================*/ .portfolio div a.portfolio-view{ margin-left: 0px; } .portfolio div a.portfolio-link{ margin-right: 0px; } /*====================== LATEST BLOG ======================*/ .latest-blog .wrapper{ margin-top: 10px; } .latest-blog p{ margin-top: 7px; } /*====================== BLOG ======================*/ .entry{ padding-bottom: 40px; margin-bottom: 40px; } /*====================== FOOTER ======================*/ #footer{ margin-left: -20px; } /*====================== SOCIAl ======================*/ #footer .social li a{ text-indent: -9999px; background-position: center center !important; } /*====================== copyright ======================*/ #copyright{ width: 764px; margin-left: -20px; } } @media (max-width: 767px){ /*====================== CONTAINER ======================*/ .container{ padding: 0 20px; } .container > .row > [class*="span"]{margin-bottom: 40px;} #page.alignleft, #page.alignright, #sidebar.alignleft, #sidebar.alignright{ float: none !important; } #page.span12{ margin-bottom: 0; } /*====================== LOGO ======================*/ .logo{ margin-bottom: 50px; text-align: center; } /*====================== MENU ======================*/ #menu{display: none;} .responsive-menu{ display:block; float: right; width:100%; border: 1px solid #c4c4c4; } /*====================== SLIDER ======================*/ #home_slider .text, #home_slider .num{display:none} .flex-direction-nav a { margin-top: 0; top: 30%; } /*====================== WELCOME ======================*/ #welcome{ padding: 40px 0; } #welcome [class*="span"]{ display: block; padding: 0; } #welcome h1{ text-align: left; padding: 0 0 25px 0; background: none; } #welcome p{ padding: 0; } /*====================== SERVICES ======================*/ .services .home_services{ border-right: none; padding-right: 0; } .home_services li img {margin-top: -8px;} .services > .span3{margin-bottom: 50px;} .services > .span9 .span3{margin-bottom: 20px;} /*====================== FEATURES ======================*/ .features .box { margin: 0; margin-top: -1px; } /*====================== PORTFOLIO ======================*/ .portfolio article{ float: left; width: 50%; } /*====================== BLOG ======================*/ .entry{ padding-bottom: 30px; margin-bottom: 30px; } /*====================== COMMENT FORM ======================*/ #comments-form input[type="text"], #comments-form input[type="email"], #comments-form input[type="url"]{ width: 99% !important; } #comments-form textarea { width: 98.8% !important; } /*====================== TEAM ======================*/ .team [class*="span"]{ width: 50%; float: left !important; } /*====================== FOOTER ======================*/ #footer{ width: 100%; margin-left: -20px; } #footer [class*="span"]{ margin-bottom: 50px; } /*====================== copyright ======================*/ #copyright{ width: 100%; padding-left: 20px; padding-right: 20px; margin-left: -20px; text-align: center; } #copyright p{ padding-bottom: 0; float: none !important; } #copyright ul{ padding-top: 10px !important; display: inline-block; float: none !important; } }