I am using my university project for Flexbox Grid i added
<div class="header">
<div id="content-top">,<div id="content"> and<div class="footer">.
<div class="header"> is fixed, <div id="content"> can be scroll-y
and footer is fixed, they all are working but i have some issue, body always can scroll i am trying to hide body scroll using overflow: hidden; but its not work for me, cannot scroll content part, how can i fix it
Thanks
/* Show it is fixed to the top */
body #add-newbookings {
overflow: hidden;
}
#content {
max-height: calc(100% - 60px);
overflow-y: scroll;
padding: 0px 5% !important;
margin-top: 120px !important;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.bg-inverse {
background-color: grey!important;
}
.header {
width: 100%;
height:5%;
background:grey;
position:fixed;
top: 0;
}
.footer {
width: 100%;
height: 60px;
background: grey;
position: fixed;
bottom: 0;
}
.card {
position: initial;
}
#content-top {width: 100%;
margin-top: 2em;
padding:1.5%;
background:white;
position:fixed;
top: 0;}
/*--------------------------------------------------Add new booking ------------------------------------*/
/*add-newbooking text fileds*/
#add-newbooking .form-control {
display: block;
width: 100%;
padding: 0.1rem 0.75rem;
font-size: 1rem;
line-height: 1.25;
color: #464a4c;
background-color: #f4f4f5;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 0px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}
/*add-newbooking creditcardbtn*/
#add-creditcard-btn .btn-primary {
color: #b89981;
background-color: #f4f4f5;
border-color: #f4f4f5;
}
/*/add-newbooking creditcardbtn*/
/*button cansel-confirm*/
#cancel-btn .btn-outline-secondary {
color: #343636;
width: 94%;
background-image: none;
background-color: #f4f4f5;
border-color: #f4f4f5;
margin: 0.5rem 0.5rem;
}
#confirm-btn .btn-outline-secondary {
olor: #ffffff;
width: 94%;
background-image: none;
background-color: #bda18b;
border-color: #bda18b;
margin: 0.5rem 0.5rem;
}
/*/button cansel-confirm*/
.add-text {color: #232323; font-size: 1.2em;}
/*add newbooking between textfilds space */
/*/add newbooking between textfilds space */
/*----------------------------------------------------/Add new booking ----------------------------------*/
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<body id="add-newbookings">
<div class="header">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Dashboard</div>
<div class="p-2"></div>
<div class="p-2">Menu</div>
</div>
</div>
<div id="content-top">
<div class="add-text">
<div class="d-flex justify-content-center">Add New
</div>
</div>
</div>
<div id="contents">
<div id="add-newbooking">
<div class="card">
<div class="card-block">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">my</div>
<div class="p-2"> <div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">To</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">house
</div>
<div class="mr-auto p-2">Add
</div>
<div class="p-2">000
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Add
</div>
<div class="mr-auto p-2">Add
</div>
<div class="p-2">00.00
</div>
</div>
<hr>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Total A
</div>
<div class="p-2">00.00
</div>
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-block">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Name
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-name" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">city
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-mobile" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">country
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-email" placeholder="">
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">email
</div>
<div class="p-2"><div class="form-group">
<input type="text" class="form-control" id="formGroupExampleInput-notes" placeholder="">
</div>
</div>
</div>
</div></div>
<br>
<div class="card">
<div class="card-block">
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">total
</div>
<div class="p-2">$00.00
</div>
</div>
<div class="d-flex flex-nowrap">
<div class="order-last p-2">
<div id="add-creditcard-btn">
<button type="button" class="btn btn-primary">Add home information</button></div>
</div>
<div class="p-2"></div>
<div class="order-first p-2"></div>
</div>
</div></div>
<div class="d-flex justify-content-end">
<div id="cancel-btn">
<button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>
<div id="confirm-btn">
<button type="button" class="btn btn-outline-secondary">Confirm</button>
</div>
</div>
</div>
</body>
what I have found in your code is a CSS issue. you have
body #add-newbookings {
overflow: hidden;
}
#add-newbookings /* will be considered as child element of body */
To solve it
either use
body#add-newbookings {
overflow: hidden;
}
#contents {
overflow: auto;
height: 100%;
}
or
body {
overflow: hidden;
}
#contents {
overflow: auto;
height: 100%;
}
Please correct <div id="contents"> as <div id="content"> and check.
Related
I'm using this border animation https://codepen.io/FlorinCornea/pen/KKpvRYo but I'm trying to make it responsive by wrapping it in bootstrap however now its sticking to the left and I cant seem to center it
This is my DEMO:
.circle-wrapper {
position: relative;
width: 110px;
height: 110px;
}
.icon {
position: absolute;
color: #fff;
font-size: 55px;
top: 55px;
left: 55px;
transform: translate(-50%, -50%);
}
.circle {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2.5px;
background-clip: content-box;
animation: spin 10s linear infinite;
}
.circle-wrapper:active .circle {
animation: spin 2s linear infinite;
}
.success {
background-color: #2e3192;
border: 2.5px dashed #2e3192;
}
.error {
background-color: #CA0B00;
border: 2.5px dashed #CA0B00;
}
.warning {
background-color: #F0D500;
border: 2.5px dashed #F0D500;
}
#keyframes spin {
100% {
transform: rotateZ(360deg);
}
}
.page-wrapper {
background-color: #eee;
align-items: center;
justify-content: center;
}
<link rel="stylesheet" id="bootstrap-css" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css?ver=6.0" type="text/css" media="all">
<div class="our-process center-align tinted-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Our Process</h2>
</div>
<div class="row">
<div class="page-wrapper d-md-flex">
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Assessor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Surveyor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>installation</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Post Inspection Visit</h5>
</div>
</div>
</div>
</div>
</div>
</div>
I have bootstrap linked to my site so that's not the issue
Here's an image of what it looks like now i am trying to center align the blue circles with the text that's below them:
For Bootstrap 4:
As you use bootstrap, I add 3 bootstrap classes:
d-md-flex (= display:flex on medium screen) on your page-wrapper
text-center on your col-md-3
mx-center (= margin horizontal auto) on your circle-wrapper
The d-md-flex could be replace by row mx-0
For bootstrap 3:
You just need to create the missing css classes:
#media (min-width: 768px){
.d-md-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
}
.mx-auto{
margin-right:auto !important;
margin-left:auto !important;
}
Check that on large screen and it should be centered.
.circle-wrapper {
position: relative;
width: 110px;
height: 110px;
}
.icon {
position: absolute;
color: #fff;
font-size: 55px;
top: 55px;
left: 55px;
transform: translate(-50%, -50%);
}
.circle {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
padding: 2.5px;
background-clip: content-box;
animation: spin 10s linear infinite;
}
.circle-wrapper:active .circle {
animation: spin 2s linear infinite;
}
.success {
background-color: #2e3192;
border: 2.5px dashed #2e3192;
}
.error {
background-color: #CA0B00;
border: 2.5px dashed #CA0B00;
}
.warning {
background-color: #F0D500;
border: 2.5px dashed #F0D500;
}
#keyframes spin {
100% {
transform: rotateZ(360deg);
}
}
.page-wrapper {
background-color: #eee;
align-items: center;
justify-content: center;
}
/************************************/
/** BOOTSTRAP 4 CSS ADDED **/
/************************************/
#media (min-width: 768px){
.d-md-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
}
.mx-auto{
margin-right:auto !important;
margin-left:auto !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="page-wrapper d-md-flex">
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Assessor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Surveyor's Visit</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>installation</h5>
</div>
<div class="col-md-3 text-center">
<div class="circle-wrapper mx-auto">
<div class="success circle"></div>
<div class="icon">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
<h5>Post Inspection Visit</h5>
</div>
</div>
I want to put my loading mask on the panel form.
The example below doesn't work as expected, the mask is overflowing the panel body. How do I make the mask width 100% of the panel body.
.mask {
position: absolute;
background-color: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
min-height: 150px;
z-index: 9999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mask .loading {
margin: 0 auto;
display: block;
background-color: #666666;
color: #ffffff;
width: 100px;
height: 100px;
padding-top: 20px;
padding-left: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<h2>Panel Mask</h2>
</div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" style="box-sizing: border-box;">
<div class="panel-body">
<div class="mask">
<span class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading...
</span>
</div>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="username">名稱</label>
<div class="col-md-4">
<input name="username" id="username" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="description">備註</label>
<div class="col-md-8">
<textarea class="form-control" id="description" name="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<button type="button" class="btn btn-default" (click)="save()">Update</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
Add the top and left property to your mask.
Then, remove the width property, and add a 15px margin from the right (right: 15px), because the gutter of bootstrap containers is 15px.
And here you go.
.mask {
position: absolute;
background-color: rgba(102,102,102,0.5);
height: 100%;
min-height: 150px;
z-index: 9999;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
top: 0;
left: 0;
right: 15px;
}
.mask .loading {
margin: 0 auto;
display: block;
background-color: #666666;
color: #ffffff;
width: 100px;
height: 100px;
padding-top: 20px;
padding-left: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-10 col-lg-offset-1"><h2>Panel Mask</h2></div>
</div>
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="panel panel-default" style="box-sizing: border-box;">
<div class="panel-body">
<div class="mask">
<span class="loading">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>Loading...
</span>
</div>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="username">名稱</label>
<div class="col-md-4">
<input name="username" id="username" class="form-control input-md">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="description">備註</label>
<div class="col-md-8">
<textarea class="form-control" id="description" name="description"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" ></label>
<div class="col-md-8">
<button type="button" class="btn btn-default" (click)="save()" >Update</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
I am quite new to Bootstrap. I tried to create a boostrap slider that contains on the left side a container with a logo, some text and on the right side a login form. Unfortunately my code is not working properley and my logo and the html form gets cropped once the browsers has a reduced resolution shrinks.
Here is my code: https://jsfiddle.net/bebetxx/z7w2bbso/3/
my CSS
.blue-container
{
color: white;
background-color:#3C8DBC;
}
.blue-container h2,p
{
color: #D2D6DE;
}
.black-container
{
background-color: #2D2D2D;
}
.black-container h2,p
{
color: #BBBBBB;
}
.image-container
{
background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg") no-repeat center center scroll;
background-size: cover;
min-height: 350px;
height: 350px;
overflow: hidden;
}
/*SLIDER HEADER
============================================================*/
.slider {
background: url("http://www.hogash-demos.com/ammon_html/images/sliders/full-slider/slide4.jpg")no-repeat center center scroll;
background-size: cover;
min-height: 450px;
height: 300px;
overflow: hidden;
}
.slider-wrap{
padding: 10px 0px;
}
.slider-img{}
.slider-img img{
width: 300px;
height: 500px;
}
.slider{}
.slider-content{
padding-top: 80px;
}
.slider h1 {
margin: 0 0 20px 0;
font-size: 50px;
color: #fff;
text-transform: uppercase;
line-height: 60px;
font-weight: 700;
}
.slider h2 {
font-family: 'lora', serif;
font-style: normal;
color: #fff;
text-transform: capitalize;
font-size: 27px;
text-shadow: 2px 5px 4px #000000;
}
.slider p {
margin-bottom: 25px;
color: #fff;
}
.top-link {
margin-top: 60px;
}
.top-link a{
padding: 20px 30px;
border-radius: 3px;
background: #fff;
font-weight: 700;
-webkit-transition: all .3s linear 0s;
-o-transition: all .3s linear 0s;
transition: all .3s linear 0s;
}
.top-link a i{
color: #00AEFF;
font-size: 25px;
margin-right: 10px;
}
.top-link a:hover{
background: #00AEFF;
color: #fff;
}
.top-link a:hover i{
color: #fff;
}
.logo-slider {
position:relative;
width: 100% !important;
background-size:cover;
padding-bottom: 35%;
background-repeat: no-repeat;
background-size: auto;
max-width: 100%;
}
<!-- Main content -->
<!-- slider section -->
<section class="slider">
<div class="slider-wrap" >
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-1 "><div class="logo-slider" style="background-image:url(http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png)"></div><h2>Connect, discover & change the world</h2><ul class="top-link list-inline"><li><i class="fa fa-android"></i> Register</li></ul></div><a name="loginbox"></a>
<div id="loginbox" style="margin-top:10px;" class="col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px">Forgot password?</div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" action="http://127.0.0.1/login#Login" role="form" method="post">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<input type="hidden" name="val" value="checkin">
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<input type="submit" value="Login" class="btn btn-success">
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account?
<a href="http://127.0.0.1/#Registration" <!--onClick="$('#loginbox').hide(); $('#signupbox').show()" -->
<strong>Sign Up Now</strong>
</a>
</div>
</div>
</div>
</form>
</div>
</div> </div>
</div>
</div> <!-- row end -->
</div> <!-- container end -->
</section>
<section id="counter-area" class="blue-container">
<div class="container">
<div class="row">
<div class="heading-inner text-center">
<h2 class="sec-title">Register to <span style="color:white !important"><?php if (isset($g_sWebsiteName)) echo $g_sWebsiteName ?> </span> </h2>
<p><strong>Register right away to this amazing community</strong></p>
<?php
$this->view('registration_box');
?>
</div>
</div> <!-- heading row end -->
</div> <!-- container end -->
</section>
thanks to #Skelly the 2nd problem was that the main slider has a height:300px limit.
The 1st problem was solved using a instead of the div logo used
I've been trying to create a zoom, pop out effect for a group of grid boxes in Bootstrap 3. The problem I am having is the zoom effect is causing the bottom columns to be pushed down since there is height being added. Is there a way to have the boxes directly on top of grid items without pushing the others down?
HTML
<div class="container">
<div class="row-programs row">
<div class="col-program col-md-3 clearfix">
<h2>Program Title</h2>
<div class="col-button">
Learn More
</div>
</div>
<div class="col-program col-md-3 clearfix">
<h2>Program Title</h2>
<div class="col-button">
Learn More
</div>
</div>
<div class="col-program col-md-3 clearfix">
<h2>Program Title</h2>
<div class="col-button">
Learn More
</div>
</div>
</div>
<div class="row-programs row">
<div class="col-program col-md-3 clearfix">
<h2>Program Title</h2>
<div class="col-button">
Learn More
</div>
</div>
<div class="col-program col-md-3 clearfix">
<h2>Program Title</h2>
<div class="col-button">
Learn More
</div>
</div>
<div class="col-program col-md-3 clearfix">
<h2>Program Title</h2>
<div class="col-button">
Learn More
</div>
</div>
</div>
</div>
CSS
.row-programs .col-program {
position: relative;
padding: 0;
min-height: 250px;
background-color: #EDEDED;
zoom: 1;
transition: zoom 1.5s ease;
}
.row-programs .col-program h2 {
text-align: center;
}
.row-programs .col-program:hover {
margin-top: -10px;
background-color: #fafafa;
transition: all 0.4s ease-in-out;
zoom: 1.1;
}
.row-programs .col-program .col-button {
position: absolute;
bottom: 0px;
width: 100%;
height: 45px;
text-align: center;
}
.row-programs .col-program .col-button .btn {
margin-top: 5px;
}
http://codepen.io/codesnippetsguru/pen/jWEBmM
Does something like this satisfy you? (no transition for zoom since it would cause layout jumps)
&:hover {
margin-top: -10px;
margin-bottom: -15px;
background-color: lighten(#EDEDED, 5%);
transition: background-color .4s ease-in-out;
z-index: 1;
zoom: 1.1;
}
http://codepen.io/anon/pen/qbEmKd
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 -->
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.
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.