How can I covert this code to responsive? [closed] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How can I convert this design to responsive.Please help me..
java script working good. So I gave only css and html code.
The design working good in normal screen but not working in small screen.
Plese help 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: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .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: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .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 is my 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 -->

Answer 1

First you need this in the <head>:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
Then in the bottom of your css you need this:
#media only screen and (max-width : 960px) {
}
Then you have to place everything from your css that you want to make responsive under this #media only screen within the curly brackets and change the width to %. Usually using width:100%; works.
Of course, there is more to this but this is the basic concept.

Answer 2

For Example
In the mentioned classes .flip-panel{}, .box1{}, .box2{} etc.,
where ever you have used px values to align just change it to % value.