I have a "flipping card" and another bootstrap 4 card positioned side by side. However, when tested on a mobile screen using Chrome's dev console, the second card overlaps the flipping card and covers it completely.
To provide some context, I've structured the code within container, row, and col-md-* as shown:
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
....
<div class="col-md-8">
</div>
</div>
</div>
If you need to refer back to my full HTML and CSS code, here is an excerpt of it:
<!-- start of third block -->
<div class="thirdblock">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-container">
<div class="card">
<div class="front">
<div class="cover">
</div>
<div class="user">
<img class="img-circle" src="images/...jpg" />
</div>
<div class="content">
.
.
.
</div> <!-- end col-md-4 -->
<div class="col-md-8">
.
.
.
</div>
</div><!-- end row -->
</div> <!-- end container -->
</div>
<!-- end third block -->
For further details regarding the issue, please check the extensive CSS code below:
.thirdblock {
padding-top: 50px;
padding-bottom: 50px;
height: 100%;
font-family: 'Arima Madurai', cursive;
background-image: url("../images/image.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card {
.
.
.
}
/* Additional styling and flip card code are included in the CSS for reference */
If anyone could assist me in identifying where I may be going wrong with my implementation, I would greatly appreciate it.