How to make card responsive using flexbox? - html

Question

I have section which contain botstrap 4 card div and pararagraph , I want to be resposnsive,
Here is HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="marketing-main-page-content_details">
<div class="marketing-main-page-content_details-card">
<div class="marketing-main-page-content_card card " data-related="details2" id="card2">
<p>Która jest własciawa osoba</p>
</div>
</div>
<div class="marketing-main-page-content_description-right" id="details1">
<div class="title-right">
<p>Która 1 jest własciawa osoba</p>
</div>
<p>To ten kurs jest dla Ciebie, specjalnie dla Ciebie.
Potem dalsza część tekstu, która ma przekonać do
zakupu. Przekonany? No to klikamy poniżej i
lecimy do formularza zamówienia!
</p>
<div class="marketing-main-page-content_description-right_button">
<button type="button" class="marketing-main-page-content_description-right_button-primary">Dowiedz
się wiecej</button>
</div>
</div>
</div>
Here is css
.marketing-main-page-content_details {
display: flex;
justify-content: space-around;
}
.marketing-main-page-content_card {
font-size: 25px;
font-family: Roboto;
font-weight: normal;
color: #707070;
}
.marketing-main-page-content_card {
width: 536px;
height: 137px;
font-family: Roboto;
margin-top: 20px;
font-size: 25px;
text-align: center;
vertical-align: middle;
display: table-cell;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-shadow: 0 3px 13px #5C5C5C;
box-shadow: 0 3px 13px #5C5C5C;
}
.marketing-main-page-content_description-right {
width: 47%;
margin-top: 78px;
}
.title-right {
font-size: 35px;
font-family: Roboto;
font-weight: 500;
color: #707070;
}
.marketing-main-page-content_description-right p {
font-size: 25px;
font-family: Roboto;
margin-top: 28px;
color: #707070;
font-weight: normal;
}
.marketing-main-page-content_description-right p {
font-size: 25px;
font-family: Roboto;
margin-top: 28px;
color: #707070;
font-weight: normal;
}
.marketing-main-page-content_description-right {
width: 47%;
margin-top: 78px;
}
Here is jsfiddle: https://jsfiddle.net/Mwanitete/a5e4d7u3/25/
Iwould like it to be responsive but right now as you can see in jsfidle its not responsive,
what do I need to change in my code to make it repsonsive?

Answer 1

I would recommend to read "A Complete Guide to Flexbox" to understand, how Flexbox works. The display: flex; rule always applies to the container of the items you want to align. I added a min-width to your cards container to give it an equal width like the right container.
Also I removed the fixed width rules and lots of redundant code in your CSS. Always make sure, that your markup is valid. This should be a responsive working example:
.marketing-main-page-content_details {
display: flex;
justify-content: space-around;
flex-flow: row nowrap;
}
.marketing-main-page-content_details-card {
min-width: 50%;
}
.marketing-main-page-content_card {
font-size: 25px;
font-family: Roboto;
font-weight: normal;
color: #707070;
height: 137px;
font-family: Roboto;
margin: 20px;
text-align: center;
-webkit-box-shadow: 0 3px 13px #5C5C5C;
box-shadow: 0 3px 13px #5C5C5C;
}
.title-right {
font-size: 35px;
font-family: Roboto;
font-weight: 500;
color: #707070;
}
.marketing-main-page-content_description-right p {
font-size: 25px;
font-family: Roboto;
margin-top: 28px;
color: #707070;
font-weight: normal;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="marketing-main-page-content_details">
<div class="marketing-main-page-content_details-card">
<div class="marketing-main-page-content_card card " data-related="details2" id="card2">
<p>Która jest własciawa osoba</p>
</div>
</div>
<div class="marketing-main-page-content_description-right" id="details1">
<div class="title-right">
<p>Która 1 jest własciawa osoba</p>
</div>
<p>To ten kurs jest dla Ciebie, specjalnie dla Ciebie. Potem dalsza część tekstu, która ma przekonać do zakupu. Przekonany? No to klikamy poniżej i lecimy do formularza zamówienia!
</p>
<div class="marketing-main-page-content_description-right_button">
<button type="button" class="marketing-main-page-content_description-right_button-primary">Dowiedz
się wiecej</button>
</div>
</div>
</div>