Flex container not wrapping items [duplicate] - html

Question

This question already has answers here:
Why are my flex items not wrapping?
(2 answers)
Closed 1 year ago.
I was creating a simple flexbox pricing page for my assignment and I ended up completing it. The problem is that the pricing cards do not wrap to the next row when the screen size is reduced i have set flex-wrap to wrap but still no luck. I searched this problem up and some results said that setting flex-container max-width to 100% would help, but it didn't. I have tried a bunch of other things but to no avail. Can someone help me with this?
CODE
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: Poppins, sans-serif;
color: #00255A;
}
.card-container{
display: flex;
height: 80%;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
.card{
background-color: white;
width:25%;
height: 70%;
border-radius: 5%;
transition: .5s ease;
border: 3px solid #00255A;
overflow: hidden;
}
.card-heading{
text-align: center;
padding: 15px;
text-transform: uppercase;
border-bottom: 3px dotted #00255A;
margin: 10px;
}
.card-body{
margin-top: 15px;
margin: 2%;
}
.card-price{
width: 60%;
margin: auto;
text-align: center;
margin-top: 10%;
font-size: larger;
}
.card-features{
margin-top: 4%;
}
ul{
text-align: center;
list-style: none;
}
ul li{
padding: 5px;
font-size: small;
font-weight: light;
}
.btn-container{
text-align: center;
margin-top: 10px;
}
.btn-container button{
width:150px;
height: 40px;
background-color: white;
font-weight: bold;
border: 3px solid #00255A ;
transition: .5s ease-out;
}
.recommended{
position: absolute;
background-color: red;
width:150px;
top: 5px;
left:-18px;
transform: rotate(-30deg);
padding-left: 15px;
}
.recommended h4{
font-weight: lighter;
text-transform: uppercase;
color: white;
}
/* Hover Effects */
.btn-container button:hover{
background-color: #00255A;
color: white;
box-shadow: 4px 4px 5px lightgray;
}
.card:hover{
box-shadow: 2px 2px 3px lightgray;
transform: translateY(-5px);
}
<div class="card-container">
<!-- Student Plan Card -->
<div class="card">
<div class="card-heading">
<h3>Student</h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>19.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>15GB Cloud Storage</li>
<li>Upto 5 Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
<!-- Team Plan Card -->
<div class="card" style="height: 80%; position: relative;">
<div class="recommended">
<h4>Popular</h4>
</div>
<div class="card-heading">
<h3>Team</h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>24.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>40GB Cloud Storage</li>
<li>Upto 10 Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
<!-- Business Plan Card -->
<div class="card" >
<div class="card-heading">
<h3>Business </h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>39.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>100GB Cloud Storage</li>
<li>Unlimited Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
</div>

Answer 1

You have to strictly define the width of the cards. 25% is a relative value, meaning it will shrink to the proper size to fit the container. I added some margins for aesthetic reasons, and added a flex: 1 0 0 - it grows if necessary, doesn't shink (if it does it won't wrap), and each card grows from the basis width defined in width. If you don't want it to grow, just define flex:0 0 auto, or just remove the flex line entirely, and define justify-content: space-evenly.
Note that you can hardcode it using media queries as well. In fact, I would recommend that as having different widths for your cards might be troublesome, and creating a pallette of cards of fixed widths would probably be easier.
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: Poppins, sans-serif;
color: #00255A;
}
.card-container {
margin-top: 20px;
display: flex;
height: 80%;
justify-content: stretch;
align-items: center;
flex-wrap: wrap;
}
.card {
background-color: white;
width: 250px;
flex: 1 0 auto;
margin: 0 50px 20px 50px;
padding-bottom: 20px;
height: 70%;
border-radius: 5%;
transition: .5s ease;
border: 3px solid #00255A;
overflow: hidden;
}
.card-heading {
text-align: center;
padding: 15px;
text-transform: uppercase;
border-bottom: 3px dotted #00255A;
margin: 10px;
}
.card-body {
margin-top: 15px;
margin: 2%;
}
.card-price {
width: 60%;
margin: auto;
text-align: center;
margin-top: 10%;
font-size: larger;
}
.card-features {
margin-top: 4%;
}
ul {
text-align: center;
list-style: none;
}
ul li {
padding: 5px;
font-size: small;
font-weight: light;
}
.btn-container {
text-align: center;
margin-top: 10px;
}
.btn-container button {
width: 150px;
height: 40px;
background-color: white;
font-weight: bold;
border: 3px solid #00255A;
transition: .5s ease-out;
}
.recommended {
position: absolute;
background-color: red;
width: 150px;
top: 5px;
left: -18px;
transform: rotate(-30deg);
padding-left: 15px;
}
.recommended h4 {
font-weight: lighter;
text-transform: uppercase;
color: white;
}
/* Hover Effects */
.btn-container button:hover {
background-color: #00255A;
color: white;
box-shadow: 4px 4px 5px lightgray;
}
.card:hover {
box-shadow: 2px 2px 3px lightgray;
transform: translateY(-5px);
}
<div class="card-container">
<!-- Student Plan Card -->
<div class="card">
<div class="card-heading">
<h3>Student</h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>19.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>15GB Cloud Storage</li>
<li>Upto 5 Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
<!-- Team Plan Card -->
<div class="card" style="height: 80%; position: relative;">
<div class="recommended">
<h4>Popular</h4>
</div>
<div class="card-heading">
<h3>Team</h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>24.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>40GB Cloud Storage</li>
<li>Upto 10 Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
<!-- Business Plan Card -->
<div class="card">
<div class="card-heading">
<h3>Business </h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>39.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>100GB Cloud Storage</li>
<li>Unlimited Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
</div>
You can view it in full screen and resize the browser to see how the wrapping works.

Answer 2

You have set the with of the card to 25%. You'll need to add a media query (https://wiki.selfhtml.org/wiki/CSS/Media_Queries) so you can set another with when the screen is too small.
.card{
width: 50%;
}
#media (min-width: 1200px){
.card{
width: 30%
}
}

Answer 3

Use hard code for width to wrap else you can use #media for different screen sizes if you want to use soft code .
Add margin and padding according to need
#media like this :
#media (max-width: 776px){
.card {
width: 48%;
margin: 2% 1%;
}
}
#media (max-width: 500px){
.card {
width: 90%;
margin: 2% auto;
}
}
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: Poppins, sans-serif;
color: #00255A;
}
.card-container {
display: flex;
height: 80%;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
}
.card {
background-color: white;
width: 300px;
height: 70%;
margin: 5px; /*Add according to need*/
border-radius: 5%;
transition: .5s ease;
border: 3px solid #00255A;
overflow: hidden;
}
.card-heading {
text-align: center;
padding: 15px;
text-transform: uppercase;
border-bottom: 3px dotted #00255A;
margin: 10px;
}
.card-body {
margin-top: 15px;
margin: 2%;
}
.card-price {
width: 60%;
margin: auto;
text-align: center;
margin-top: 10%;
font-size: larger;
}
.card-features {
margin-top: 4%;
}
ul {
text-align: center;
list-style: none;
}
ul li {
padding: 5px;
font-size: small;
font-weight: light;
}
.btn-container {
text-align: center;
margin-top: 10px;
}
.btn-container button {
width: 150px;
height: 40px;
background-color: white;
font-weight: bold;
border: 3px solid #00255A;
transition: .5s ease-out;
}
.recommended {
position: absolute;
background-color: red;
width: 150px;
top: 5px;
left: -18px;
transform: rotate(-30deg);
padding-left: 15px;
}
.recommended h4 {
font-weight: lighter;
text-transform: uppercase;
color: white;
}
/* Hover Effects */
.btn-container button:hover {
background-color: #00255A;
color: white;
box-shadow: 4px 4px 5px lightgray;
}
.card:hover {
box-shadow: 2px 2px 3px lightgray;
transform: translateY(-5px);
}
<div class="card-container">
<!-- Student Plan Card -->
<div class="card">
<div class="card-heading">
<h3>Student</h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>19.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>15GB Cloud Storage</li>
<li>Upto 5 Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
<!-- Team Plan Card -->
<div class="card" style="height: 80%; position: relative;">
<div class="recommended">
<h4>Popular</h4>
</div>
<div class="card-heading">
<h3>Team</h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>24.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>40GB Cloud Storage</li>
<li>Upto 10 Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
<!-- Business Plan Card -->
<div class="card">
<div class="card-heading">
<h3>Business </h3>
</div>
<div class="card-body">
<div class="card-price">
<h1>39.99/mo</h1>
</div>
<div class="card-features">
<ul>
<li>24/7 Live Support</li>
<li>100GB Cloud Storage</li>
<li>Unlimited Users</li>
</ul>
</div>
</div>
<div class="btn-container">
<button>Buy Now!</button>
</div>
</div>
</div>