Showing full content of the flip card under mobile devices - html

Question

I have a flip card build with css/html which is flipping on mouse hover. Everything works fine except on mobile. It is almost impossible to be flipped. The user press and hold on display until it's flipped for the back and then can't be flipped back to front.
Is it possible somehow on mobile devices just to show both sides one under another? On same screen e.g. to be disabled the flipping part and just show all the information on one page.
Here is my html and css so far
.small-text {
font-weight: 300;
}
.back .main { font-weight: 300;}
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform 1.0s;
-o-transition: -o-transform 1.0s;
transition: transform 1.0s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
z-index: 3;
}
/* Style */
.card{
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card-container, .front, .back {
width: 100%;
height: 120px;
border-radius: 4px;
}
.card .content{
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 160px;
}
.card .back .content .main {
height: 215px;
}
.card .name {
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-transform: capitalize;
}
.card .profession{
color:black;
margin-bottom: 20px;
font-weight: 300;
}
<div class="container main-card">
<div class="card-container">
<div class="card">
<div class="front">
<div class="content">
<div class="main">
<h3 class="name"><span style="font-size:56px;"><span style="font-family:oswald-medium,oswald,sans-serif;font-weight:900;">Header</span></span></h3>
<p class="small-text" style="font-size: 18px;width: 385px;color:#414141;">Lorem ipsum</p>
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="content" style="margin-top: 20%;">
<div class="main">
<h6 style="font-size: 20px;color:#414141 !important;cursor: pointer;font-family: 'Roboto Condensed' !important;">mail#example.com</h6>
<h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 1</h6>
<h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 2</h6>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col sm 3 -->

Answer 1

You would need to use media queries and put the whole CSS in the media queries, and then work on each size separetly.
#media screen and (min-width: 640px) {
.small-text {
font-weight: 300;
}
.back .main {
font-weight: 300;
}
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform 1.0s;
-o-transition: -o-transform 1.0s;
transition: transform 1.0s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
z-index: 3;
}
/* Style */
.card {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card-container,
.front,
.back {
width: 100%;
height: 120px;
border-radius: 4px;
}
.card .content {
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 160px;
}
.card .back .content .main {
height: 215px;
}
.card .name {
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-transform: capitalize;
}
.card .profession {
color: black;
margin-bottom: 20px;
font-weight: 300;
}
}
#media screen and (max-width: 640px) {
.small-text {
font-weight: 300;
}
.main {
font-weight: 300;
}
/* Style */
.card {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
}
.card-container,
.front,
.back {
width: 100%;
height: 50px;
border-radius: 4px;
}
.card .content {
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 160px;
}
.card .back .content .main {
height: 215px;
}
.card .name {
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-transform: capitalize;
}
.card .profession {
color: black;
margin-bottom: 20px;
font-weight: 300;
}
}
<div class="container main-card">
<div class="card-container">
<div class="card">
<div class="front">
<div class="content">
<div class="main">
<h3 class="name"><span style="font-size:56px;"><span style="font-family:oswald-medium,oswald,sans-serif;font-weight:900;">Header</span></span>
</h3>
<p class="small-text" style="font-size: 18px;width: 385px;color:#414141;">Lorem ipsum</p>
</div>
</div>
</div>
<!-- end front panel -->
<div class="back">
<div class="content" style="margin-top: 20%;">
<div class="main">
<h6 style="font-size: 20px;color:#414141 !important;cursor: pointer;font-family: 'Roboto Condensed' !important;">mail#example.com</h6>
<h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 1</h6>
<h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 2</h6>
</div>
</div>
</div>
<!-- end back panel -->
</div>
<!-- end card -->
</div>
<!-- end card-container -->
</div>
<!-- end col sm 3 -->