H. Pauwelyn ツ H. Pauwelyn ツ - 1 month ago 7
Sass (Sass) Question

Prevent split cards in columns with CSS

I'm making a timeline with two columns. The problem I've got is that one card is split over two columns like shown on image below. How could I solve this problem? Here you've my SCSS and HTML code.

Thanks in advance.

.card-col-2 {
@media (min-width: 980px) {
column-count: 2;
column-gap: 100px;
column-fill: auto;
column-rule-style: solid;
column-fill: auto;
}

@media (max-width: 980px) {
column-count: 1;
column-gap: 100px;
column-fill: auto;
column-rule-style: solid;
column-fill: auto;
}
padding: 20px;

.card {
background-color: #fff;
border: 1px solid gray;
border-radius: 5px;
padding: 15px;
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
box-sizing: content-box;
margin: 20px 0;
height:150px;

.pointer {
border: 1px solid gray;
width: 30px;
height: 30px;
transform: rotate(45deg);
position: relative;
z-index: -1;
background-color: white;
}

.pointer-left {
left: -30px;
top: 5px;
}
.pointer-right {
left: 470px;
top: 5px;
}
}
}


<div class="card-col-2">
<div class="card">
<div class="row">
<div class="col-md-8">
<h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> NMCT @ HoWest</h2>
<p>Van September 2014 tot heden</p>
</div>
<div class="col-md-4">
<img src="images/nmct.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-md-8">
<h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> VDO Analyst programmeur @ Syntra West</h2>
<p>Van September 2014 tot heden</p>
</div>
<div class="col-md-4">
<img src="images/syntra.jpg" class="img-responsive"/>
</div>
</div>
</div>
<div class="card">
<div class="row">
<div class="col-md-8">
<h2 class=""><i class="fa fa-child fa-fw"></i> Geboren</h2>
<p>Op 7 Januarie 1994</p>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>


enter image description here

Answer

You have to add break-inside: avoid; in the .card to prevent break the div but there is a problem with the shadow.

.card-col-2 {
  padding: 20px;
}
@media (min-width: 980px) {
  .card-col-2 {
    column-count: 2;
    column-gap: 100px;
    column-fill: auto;
    column-rule-style: solid;
    column-fill: auto;
  }
}
@media (max-width: 980px) {
  .card-col-2 {
    column-count: 1;
    column-gap: 100px;
    column-fill: auto;
    column-rule-style: solid;
    column-fill: auto;
  }
}
.card-col-2 .card {
  background-color: #fff;
  border: 1px solid gray;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  box-sizing: content-box;
  margin: 20px 0;
  height: 150px;
  break-inside: avoid;
}
.card-col-2 .card .pointer {
  border: 1px solid gray;
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  position: relative;
  z-index: -1;
  background-color: white;
}
.card-col-2 .card .pointer-left {
  left: -30px;
  top: 5px;
}
.card-col-2 .card .pointer-right {
  left: 470px;
  top: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-col-2">
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> NMCT @ HoWest</h2>
                <p>Van September 2014 tot heden</p>
            </div>
            <div class="col-md-4">
                <img src="images/nmct.jpg" class="img-responsive"/>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-graduation-cap fa-fw"></i> VDO Analyst programmeur @ Syntra West</h2>
                <p>Van September 2014 tot heden</p>
            </div>
            <div class="col-md-4">
                <img src="images/syntra.jpg" class="img-responsive"/>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="row">
            <div class="col-md-8">
                <h2 class=""><i class="fa fa-child fa-fw"></i> Geboren</h2>
                <p>Op 7 Januarie 1994</p>
            </div>
            <div class="col-md-4">
            </div>
        </div>
    </div>
</div>

Comments