We Keep Coding

Bootstrap pill content not going away

I am using bootstrap's pill nav bar and for some reason once I add my code which contains tiles that give a netflix feel (on the STEMuli tab), the navbar will no longer remove the content when going to another tab. It actually will add the next tabs information directly below. I thought I was missing some div tags, but I took away some code and rebuilt it to double check, div tags checkout. I am not sure what could cause this? Because right when I remove the content in my "STEMuli" tab in the actual code and just add some plain text it works just fine, even if I add a row to it...I am stuck please help!
.popover-header{
color:#000000;
}
#row{
overflow: hidden;
}
.logo{
z-index:0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0)));
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover ~ .tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover{
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn{
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative; }
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7; }
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative; }
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px; }
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem; }
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important; }
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem; }
::-webkit-scrollbar{
width: 0px;
height:5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb{
background-color: #F1D302;
border-radius:10px;
box-shadow: insert 0 0 6px rgba(0,0,0,.3);
}
.spacing{
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color:#FDFFFC;
}
h4{
color:#FDFFFC;
}
.button{
background-color:#0267C1;
}
.nav-pills .nav-link.active
{
background-color: #0267c1;
}
h3{
color: #ffffff;
}
#cardimg
{
height:300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function() {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</a>
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home" aria-selected="true"><h3>STEMuli</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile" aria-selected="false"><h3>Community</h3></a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact" aria-selected="false"><h3>Who We Are</h3></a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description" data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
</main>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

You have a lot of invalid HTML markup, somewhere unclosed tags and an unknown </main> tag in the end before the body, an unclosed <a href='#.' onclick="redirectbankon()"> which is wrapping the nested div.tile which is ok if you are using HTML5 but you still need to close it. A better way would be to provide an id to the anchor and then bind the click event to the anchor to call the function on click.
Remove the flaws in your HTML and it will work correctly by replacing the content rather than adding the tab underneath the first.
See a demo below of your code.
.popover-header {
color: #000000;
}
#row {
overflow: hidden;
}
.logo {
z-index: 0;
}
.row {
overflow: scroll;
width: 100%;
z-index: 1;
}
.row__inner {
-webkit-transition: 450ms -webkit-transform;
transition: 450ms -webkit-transform;
transition: 450ms transform;
transition: 450ms transform, 450ms -webkit-transform;
font-size: 0;
white-space: nowrap;
margin: 50px 0;
padding-bottom: 30px;
padding-bottom: 30px;
}
.tile {
position: relative;
display: inline-block;
width: 250px;
height: 250px;
margin-right: 10px;
margin-left: 50px;
font-size: 20px;
cursor: pointer;
-webkit-transition: 450ms all;
transition: 450ms all;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.tile__img {
width: 250px;
height: 250px;
-o-object-fit: cover;
object-fit: cover;
}
.tile__details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
font-size: 10px;
opacity: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.9)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-transition: 450ms opacity;
transition: 450ms opacity;
}
.tile__details:after,
.tile__details:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: #000;
}
.tile__details:before {
left: 0;
width: 100%;
font-size: 30px;
margin-left: 7px;
margin-top: -18px;
text-align: center;
z-index: 2;
}
.tile:hover .tile__details {
opacity: 1;
}
.tile__title {
position: absolute;
bottom: 0;
padding: 10px;
}
.row__inner:hover {
-webkit-transform: translate3d(-62.5px, 0, 0);
transform: translate3d(-62.5px, 0, 0);
}
.row__inner:hover .tile {
opacity: 0.3;
}
.row__inner:hover .tile:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
.tile:hover~.tile {
-webkit-transform: translate3d(125px, 0, 0);
transform: translate3d(125px, 0, 0);
}
a:hover {
color: #F1D302;
}
.checkbox-wrapper {
height: 13px;
width: 13px;
}
.btn {
background-color: #F1D302;
}
body {
font-family: 'Rubik', sans-serif;
}
.card-img-top {
height: 300px;
width: 100%;
}
.btn-xlong {
padding: 10px 50px;
font-size: 22px;
line-height: normal;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.steps-form-3 {
width: 2px;
height: 470px;
position: relative;
}
.steps-form-3 .steps-row-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.steps-form-3 .steps-row-3:before {
top: 14px;
bottom: 0;
position: absolute;
content: "";
width: 2px;
height: 100%;
background-color: #7283a7;
}
.steps-form-3 .steps-row-3 .steps-step-3 {
height: 150px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
text-align: center;
position: relative;
}
.steps-form-3 .steps-row-3 .steps-step-3.no-height {
height: 50px;
}
.steps-form-3 .steps-row-3 .steps-step-3 p {
margin-top: 0.5rem;
}
.steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
width: 60px;
height: 60px;
border: 2px solid #59698D;
background-color: white !important;
color: #59698D !important;
border-radius: 50%;
padding: 18px 18px 15px 15px;
margin-top: -22px;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
border: 2px solid #4285F4;
color: #4285F4 !important;
background-color: white !important;
}
.steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
font-size: 1.7rem;
}
::-webkit-scrollbar {
width: 0px;
height: 5px;
background-color: #161925;
}
::-webkit-scrollbar-thumb {
background-color: #F1D302;
border-radius: 10px;
box-shadow: insert 0 0 6px rgba(0, 0, 0, .3);
}
.spacing {
padding: 6px;
}
/*This css file defines the color scheme and font of all of the webpages so import into every new webpage*/
body {
font-family: 'Rubik', sans-serif;
background-color: #9E2B25;
color: #FDFFFC;
}
h4 {
color: #FDFFFC;
}
.button {
background-color: #0267C1;
}
.nav-pills .nav-link.active {
background-color: #0267c1;
}
h3 {
color: #ffffff;
}
#cardimg {
height: 300px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>STEMuli</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Rubik:500" rel="stylesheet">
<link href="/css/mastercss.css" rel="stylesheet">
<link rel="stylesheet" href="/css/profile.css" crossorigin="anonymous">
<script src="/js/moment.js"></script>
</head>
<script>
(function () {
('[data-toggle="popover"]').popover()
})
</script>
<body>
<!--This is where the logo is-->
<div id="row" class="row h-100 justify-content-center">
<img src="/img/tcb-logo.png" class="img-fluid" alt="Responsive image">
</div>
<ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-STEM" role="tab" aria-controls="pills-home"
aria-selected="true">
<h3>STEMuli</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-Community" role="tab" aria-controls="pills-profile"
aria-selected="false">
<h3>Community</h3>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-aboutUs" role="tab" aria-controls="pills-contact"
aria-selected="false">
<h3>Who We Are</h3>
</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade" id="pills-STEM" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<h2>Credit</h2>
<div class="row__inner">
<a href='#.' onclick="redirectbankon()">
<div class="tile" data-toggle="popover" data-trigger="hover" data-placement="right" data-html="true" title="Description"
data-content="The Bank On It module provides an overview of banking services and is designed to help participants build a positive relationship with a financial institution.">
<div class="tile__media">
<img class="tile__img" src="/img/bankonit.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Bank On It</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/borrowing.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Borrowing Basics</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/keepitsafe.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Keep it Safe</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/checkitoutpt1.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Check It Out</h5>
</div>
</div>
</div>
<div class="tile">
<div class="tile__media">
<img class="tile__img" src="/img/yourownhome.png" alt="" />
</div>
<div class="tile__details">
<div class="tile__title">
<h5>Your Own Home</h5>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-Community" role="tabpanel" aria-labelledby="pills-profile-tab">How are you</div>
<div class="tab-pane fade" id="pills-aboutUs" role="tabpanel" aria-labelledby="pills-contact-tab">.</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/JavaScript" src="/js/redirect.js"></script>
<script type="text/JavaScript" src="/js/form.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

Align divs next to each other CSS (Cards Style)

I'm trying to align cards that are wrapped up in divs. What I want to do is align those cards beside each other until it reaches maximum screen width, then I want it to move to the next line automatically.
The problem is that once I copy the html code, the new copied card spawns on top of the previous card rather than next to each other.
HTML:
<div class="fighter-card">
<div class="front active">
<div class="ranking-position">1</div>
<div class="more">
<i class="fa fa-info-circle" aria-hidden="true"></i>
</div>
<div class="fighter-picture">
<img src="~/images/Resources/RankingsPhotos/Lomachenko.png" />
</div>
<ul class="information">
<li>
<div class="information-left">Name:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Weight:</div>
<div class="information-right">aa</div>
</li>
<li>
<div class="information-left">Belts:</div>
<div class="information-right">aa</div>
</li>
</ul>
</div>
<div class="back">
<div class="go-back">
<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
</div>
<ul class="information">
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">None of your business</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Yesterday</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">Today</div>
<div class="information-right">9<sup>o</sup></div>
</li>
<li>
<div class="information-left">aa</div>
<div class="information-right">9<sup>o</sup></div>
</li>
</ul>
</div>
</div>
<div class="fighter-card">
//Next div with the same content for testing
</div>
CSS:
.fighter-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
min-height: 400px;
}
.fighter-card .front {
width: 100%;
height: 100%;
background: #171717;
padding: 30px;
box-sizing: border-box;
transition: .5s;
transform-origin: right;
float: left;
}
.ranking-position {
font-weight: bold;
width: 50%;
text-align: left;
float: left;
color: #fff;
font-size: 40px;
}
.more {
width: 50%;
text-align: right;
cursor: pointer;
float: right;
font-size: 24px;
color: #fff;
display: block;
}
.fighter-picture {
background-size: cover;
}
.information {
margin: 0;
padding: 0;
}
.information li {
padding: 10px 0;
border-bottom: 2px solid #fff;
display: flex;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.information li:last-child {
border-bottom: none;
}
.information li .information-left {
width: 50%;
}
.information li .information-right {
width: 50%;
text-align: right;
}
.fighter-card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 30px;
background: rgba(0,0,0,0.7);
box-sizing: border-box;
transform-origin: left;
transition: .5s;
transform: translateX(100%) rotateY(90deg);
}
.fighter-card .back.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front.active {
transform: translateX(0) rotateY(0deg);
}
.fighter-card .front {
transform: translateX(-100%) rotateY(90deg);
}
.go-back {
font-size: 24px;
color: #fff;
text-align: right;
}
.go-back .fa {
cursor: pointer;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.more').click(function () {
$('.back').addClass('active')
$('.front').removeClass('active')
});
$('.go-back').click(function () {
$('.back').removeClass('active')
$('.front').addClass('active')
});
});
I know it's a lot of code here entered. Just want to make sure that everything that could be related to this problem is included.
Thanks in advance.

If you use absolute positioning and specify the location, then you should do that for each card. If not, let the browser do the positioning by using display: inline-block or float: left (if there is other content on the line).

Push Menu - How to push body

I have a menu that opens to the right. My issue is that I want the body to resize after I have opened the menu. The menu is 300px wide and I want the body to resize to take up the remainder of the screen. I saw a few examples, but all they do is shift the body so part of it is not visible and off screen. You can see my example here
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<li class="block">Home</li>
<li class="block">Profile</li>
<li class="block">Blogs</li>
<li class="block">Following</li>
<li class="block">Settings</li>
<li class="block">Logout</li>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
``

As mentioned in the comment, this is what you could do. Add a class to your HTML body when the menu is opened and add a padding-right equals to the width of the menu.
$(".hamburger").on("click", function() {
$(".hamburger").toggleClass("is-active");
//add menu-active class to document body
$('body').toggleClass('menu-active');
$(".side-nav").toggleClass("hidden");
if ($("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
} else if (!$("#side").hasClass("is-active")) {
$("#main").toggleClass("hidden");
}
});
html,
body {
padding: 0;
margin: 0;
height: 100%;
background-color: black;
box-sizing: border-box;
}
button:focus {
outline: 0;
}
a {
color: #fff;
}
a:hover {
color: #fff;
text-decoration: none;
}
.side-nav {
position: absolute;
background-color: gray;
width: 300px;
height: 100%;
z-index: 1;
right: 0;
}
.open-menu-side {
position: relative;
display: block;
height: 80px;
width: 100%;
text-align: center;
float: right;
}
.side-nav-ul {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
list-style: none;
font-size: 28px;
color: #fff;
}
.block {
height: 40px;
}
header {
height: 80px;
background-color: #fff;
}
.brand {
display: inline-block;
}
.img-menu img {
height: 50px;
width: 50px;
border-radius: 50%;
border: solid 1px black;
float: left;
}
.hidden {
position: absolute;
right: -300px;
}
#pushed {
position: relative;
}
#main {
float: right;
}
.hamburger {
padding: 15px 15px;
height: 100%;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
}
.hamburger:hover {
opacity: 0.7;
}
.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px;
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
width: 40px;
height: 4px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease;
}
.hamburger-inner::before,
.hamburger-inner::after {
content: "";
display: block;
}
.hamburger-inner::before {
top: -10px;
}
.hamburger-inner::after {
bottom: -10px;
}
.hamburger--squeeze .hamburger-inner {
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
transform: rotate(45deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger--squeeze.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hello-text {
text-align: right;
color: #fff;
font-size: 22px;
}
/*add padding-right when menu is active*/
body.menu-active {
padding-right: 300px;
}
<body>
<nav class="side-nav hidden">
<div>
<div class="open-menu-side" id="side">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<ul class="side-nav-ul">
<a href="#">
<li class="block">Home</li>
</a>
<a href="#">
<li class="block">Profile</li>
</a>
<a href="#">
<li class="block">Blogs</li>
</a>
<a href="#">
<li class="block">Following</li>
</a>
<a href="#">
<li class="block">Settings</li>
</a>
<a href="#">
<li class="block">Logout</li>
</a>
</ul>
</div>
</nav>
<header id="pushed">
<nav>
<div class="open-menu" id="main">
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
<div class="brand">Login!</div>
</nav>
</header>
<section></section>
<p class="hello-text">hello</p>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" src="lib/index.js"></script>
</body>
Working codepen https://codepen.io/azs06/pen/KQqqee

Add
margin-left: 300px;
to
.side-nav-ul
It worked for me in your codepen. Margin will push everything out of the way.

Hide sliding sidebar and change icon onclick

The following code I have used:
// Code goes here
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
border: solid 1px;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 25%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>
show and hide onclick
I am able to show and hide onclick of button. My requirement is when I click on that button its icon should change and if I click inside sidebar (on sidebar items) sidebar should hide. Can anyone improve my script to achieve it?

$(document).ready(function(){
$('.sidebar').on('click','a',function(e){
var href = $(this).attr('href');
$('iframe').attr('src', href);
e.preventDefault();
//console.log(e.target);
toggleMenu();
})
});
function toggleMenu(){
$('.menu_sample').toggleClass('hide');
$('.content').toggleClass('pushed');
$('#menu-button').find('.glyphicon')
.toggleClass('glyphicon-chevron-right glyphicon-chevron-left');
}
/* Styles go here */
.menu_sample {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100%;
border: solid 1px #eee;
transition: transform 0.1s ease-out;
}
.content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
transition: left 1s ease-out;
margin-left: -2%;
margin-top: 150%;
}
/*transition*/
.top_mar {
margin-top: 5%;
}
/* on toggle*/
.content.pushed {
left: 225px;
}
.hide {
transform:translateX( -100px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="menu_sample top_mar">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<span style="color:blue; font-weight:bold;">Dashboards</span>
</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<div class="content pushed top_mar">
<button class="btn btn-default" onclick="toggleMenu()">
<span id="menu-button">
<span class="glyphicon glyphicon-chevron-right" id="glymphi" style="margin-left:14%;">Button</span>
</span>
</button>
</div>
<div style="margin-left:-2%; margin-top:5%; height: 625px;" >
<iframe width="100%" height="95%" name="iframe_a" frameborder="0"></iframe>
</div>

shuffle.js: position of grids move after shuffle

I have a 3*3 grid layout. It should look something like this:
Then I added shuffle.js to shuffle the grids and filter them. However, the grid layout turns into this.
Why did this happen and how to fix it?? Thank you
My HTML code:
<body>
<div id="wrapper">
<div id="menunav">
<header id="logo">Siyan Zhao</header>
<nav id="nav">
<ul>
<li>Portfolio</li>
<li>About Me</li>
<li>Skills</li>
<li>Resume</li>
</ul>
</nav>
<ul id="filter">
<li><a class="active" href="#" data-group="all">All</a></li>
<li>UI/UX</li>
<li>Design</li>
<li>Research</li>
<li>Illustration</li>
</ul>
</div>
<!--Main content in the format of grids-->
<div id="content">
<div class="grid3">
<article class="bucket">
<a href="firefly-ticket.html">
<img src="images/Firefly/firefly_icon.png" alt=""/>
<div class="img-overlay">
<h5>Firefly: A Smart Ticket</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="Chance.html">
<img src="images/Chance/Chance Icon_2.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "research", "ui"]'>
<h5>Chance</h5>
</div>
</a>
</article>
<article class="bucket" >
<a href="monogram.html">
<img src="images/monogram.jpg" alt=""/>
<div class = "img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Monogram</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="gestalt-composition.html">
<img src="images/gestalt-cover.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Gestalt Composition</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="redthread.html">
<img src="images/redThread.jpg" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>The Red Thread</h5>
</div>
</a>
</article>
<article class="bucket">
<a href="typographic-hierarchy.html">
<img src="images/poster copy.png" alt=""/>
<div class="img-overlay"
data-group='["all", "design", "illustration"]'>
<h5>Typographic Hierarchy</h5>
</div>
</a>
</article>
</div>
</div>
<div id="footer">©Siyan Zhao 2014</div>
</div>
</body>
My CSS code:
/* -------------------------------------*/
#wrapper {
background-color: #FFFfff;
width: 70%;
padding-bottom: 0px;
margin: 0 auto;
position: relative;
min-height: 100%;
overflow-x: hidden;
}
/* Left hand side menu style */
/* -------------------------------------*/
#menunav {
z-index: 20;
background-color: #ffffff;
position: fixed;
width: 210px;
padding-top: 80px;
display: block;
margin: 0px;
border-right-style: none;
border-color: rgba(0,0,0,1.00);
border-right-width: thin;
font-family: 'Droid Sans', sans-serif;;
font-weight: normal;
}
#logo {
text-align: left;
margin-bottom: 48px;
padding-top: 18px;
font-family: "Century Gothic";
font-weight: bold;
font-size:2.3em;
}
#menunav ul {
list-style-type: none;
padding: 0px 0px 0px 0px;
}
#menunav #nav a{
text-align: left;
font-size: 1em;
padding-top: 18px;
border-color: rgba(0,0,0,1.00);
border-bottom-style: solid;
border-width: thin;
-webkit-transition: padding-left 0.3s ease-in-out;
-moz-transition: padding-left 0.3s ease-in-out;
-o-transition: padding-left 0.3s3 ease-in-out;
-ms-transition: padding-left 0.3s3 ease-in-out;
transition: padding-left 0.3s ease-in-out;
}
#menunav #nav a:hover {
padding-left: 50px;
}
#menunav #nav a:active, #mainnav a:focus, #menunav #nav a.thispage{
text-decoration: none;
font-weight: bold;
/*ovrwrite hover effect for active page */
padding-left: 0;
}
/* Formatting for main page grid area*/
/* -------------------------------------*/
.bucket {
float: left;
margin: 0% 0%;
position: relative;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
transition: .5s all;
width: 33.3%;
}
.grid3 .bucket:nth-of-type(3n+1) {
clear: left;
}
.bucket img {
height: auto;
width: 100%;
/*Align image to the baseline to delete white spacing*/
vertical-align: bottom;
}
/*hover over overlay effect*/
/* -------------------------------------*/
.img-overlay {
background-color: rgba(0,0,0,0.7);
bottom: 0;
left: 0;
top: 0;
opacity: 0;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 1000;
transition: opacity 0.25s;
-webkit-transition: opacity 0.25s;
}
.img-overlay h5{
opacity: 1;
display: inline-block;
margin: auto;
font-weight: normal;
font-size: 1.3vw;
line-height: 1vw;
position: absolute;
top: 30%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.img-overlay p{
opacity: 1;
display: inline-block;
margin: auto;
position: absolute;
top: 47%;
right: 10px;
left: 10px;
color: rgba(255,255,255,1.00);
text-align: center;
font-family: 'Droid Serif', serif;
font-size: 1.2vw;
line-height: 1vw;
/*vertical-align: middle;*/
}
.bucket:hover .img-overlay {
opacity: 1;
}
My Javascript
$(document).ready(function() {
/* Shuffling buckets */
var $grid3 = $('.grid3');
$grid3.shuffle({
itemSelector: '.bucket'
});
$('#filter a').click(function (e) {
e.preventDefault();
// set active class
$('#filter a').removeClass('active');
$(this).addClass('active');
// get group name from clicked item
var groupName = $(this).attr('data-group');
// reshuffle grid
$grid3.shuffle('shuffle', groupName );
});

You should make sure that the container parent div are set:
#content {
position:relative;
}
or
#content . grid3 {
position:relative;
}