css - How can I covert this code to responsive? -
how can convert design responsive.please me..
java script working good. gave css , html code. design working in normal screen not working in small screen.
plese me...
thank you.....
this ismy css.
.col_half { width: 49%; } .col_third { width: 32%; } .col_fourth { width: 23.5%; } .col_fifth { width: 18.4%; } .col_sixth { width: 15%; } .col_three_fourth { width: 74.5%;} .col_twothird{ width: 66%;} .col_half, .col_third, .col_twothird, .col_fourth, .col_three_fourth, .col_fifth{ position: relative; display:inline; display: inline-block; float: left; margin-right: 2%; margin-bottom: 20px; } .end { margin-right: 0 !important; } /*-=-=-=-=-=-=-=-=-=-=- */ /* flip panel */ /*-=-=-=-=-=-=-=-=-=-=- */ .wrapper{ width: 100%; margin: 0 auto; background-color: #bdd3de; hoverflow: hidden;} .flip-panel { margin: 0 auto; height: 130px; position: relative; -webkit-perspective: 600px; -moz-perspective: 600px; } .flip-panel .front, .flip-panel .back { text-align: center; } .flip-panel .front { height: inherit; position: absolute; top: 0; z-index: 900; text-align: center; -webkit-transform: rotatex(0deg) rotatey(0deg); -moz-transform: rotatex(0deg) rotatey(0deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; transition: .4s ease-in-out; } .flip-panel .back { height: inherit; position: absolute; top: 0; z-index: 1000; -webkit-transform: rotatey(-180deg); -moz-transform: rotatey(-180deg); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; transition: .4s ease-in-out; } .flip-panel.flip .front { z-index: 900; -webkit-transform: rotatey(180deg); -moz-transform: rotatey(180deg); } .flip-panel.flip .back { z-index: 1000; -webkit-transform: rotatex(0deg) rotatey(0deg); -moz-transform: rotatex(0deg) rotatey(0deg); } .box1{ background-color: #14bcc8; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .box2{ background-color: #ff7e70; width: 250px; height: 150px; margin: 0 auto; padding: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } this html5 part
<div class="row"> <div class="col-md-6 col-lg-4 wow fadeinup" data-wow-duration="3s"> <div class="wrapper"> <div class="col_third"> <div class="hover flip-panel"> <div class="front"> <div class="box1"> <p>front side</p> </div> </div> <div class="back"> <div class="box2"> <p>back side</p> </div> </div> </div> </div> </div> </div> <!-- item end --> <div class="col-md-6 col-lg-4 wow fadeinup" data-wow-duration="3s"> <div class="wrapper"> <div class="col_third"> <div class="hover flip-panel"> <div class="front"> <div class="box1"> <p>front side</p> </div> </div> <div class="back"> <div class="box2"> <p>back side</p> </div> </div> </div> </div> </div> </div> <!-- item end --> <div class="col-md-6 col-lg-4 wow fadeinup" data-wow-duration="3s"> <div class="wrapper"> <div class="col_third"> <div class="hover flip-panel"> <div class="front"> <div class="box1"> <p>front side</p> </div> </div> <div class="back"> <div class="box2"> <p>back side</p> </div> </div> </div> </div> </div> </div> <!-- item end --> <div class="col-md-6 col-lg-4 wow fadeinup" data-wow-duration="3s"> <div class="wrapper"> <div class="col_third"> <div class="hover flip-panel"> <div class="front"> <div class="box1"> <p>front side</p> </div> </div> <div class="back"> <div class="box2"> <p>back side</p> </div> </div> </div> </div> </div> </div> <!-- item end --> <div class="col-md-6 col-lg-4 wow fadeinup" data-wow-duration="3s"> <div class="wrapper"> <div class="col_third"> <div class="hover flip-panel"> <div class="front"> <div class="box1"> <p>front side</p> </div> </div> <div class="back"> <div class="box2"> <p>back side</p> </div> </div> </div> </div> </div> </div> <!-- item end --> <div class="col-md-6 col-lg-4 wow fadeinup" data-wow-duration="3s"> <div class="wrapper"> <div class="col_third"> <div class="hover flip-panel"> <div class="front"> <div class="box1"> <p>front side</p> </div> </div> <div class="back"> <div class="box2"> <p>back side</p> </div> </div> </div> </div> </div> </div> <!-- item end --> </div><!-- service items end--> </div><!-- service section end -->
first need in <head>:
<head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> </head> then in bottom of css need this:
@media screen , (max-width : 960px) { } then have place css want make responsive under @media screen within curly brackets , change width %. using width:100%; works.
of course, there more basic concept.
Comments
Post a Comment