here is a piece of code from my file ,im following a youtube tutorial to make this card using html and css but the cards dont displa next to eachother like it shows in the video, is it becuase my image is too big ??
my css code
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background-color: #f0f0f0;
}
.card-container{
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 100px;
}
.card{
width: 325px;
background: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 4px rgb(0,0,0,0.2);
margin: 20px;
}
.card img{
width: 100%;
height: auto;
}
.card-content{
padding: 16px;
}
.card-content h3 {
font-size: 28px;
margin-bottom: 8px;
}
.card-content p{
color: #666;
font-size: 15px;
line-height: 1.3;
}
.card-content .btn{
display: inline-block;
padding: 8px 16px;
background-color: #333;
text-decoration: none;
border-radius: 4px;
margin-top: 16px;
color: #fff;
}
my html code
<div class="card-container">
<div class="card">
<img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
<div class="card-content">
<h3>Nike Shoes</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
praesentium similique, libero perspiciatis neque veniam perferendis
deleniti, esse necessitatibus sed
</p>
<a href="" class="btn">Read More!</a>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="images/nike.jpg" alt="nikeshoes" class="card-image" />
<div class="card-content">
<h3>Nike Shoes</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas
praesentium similique, libero perspiciatis neque veniam perferendis
deleniti, esse necessitatibus sed
</p>
<a href="" class="btn">Read More!</a>
</div>
</div>
</div>
i used the display flex property and i was expecting my cards to display next to eachother but instead they are in a straight line with one being ontop of the other
3
Answers
While using
flex
, don’t use absolute widths, instead useflex-basis
. This will enable you to manipulate the flex to the full extent. Also, you need to add 2 cards inside the card-container and not two card-container.To display cards, I would prefer you to use
CSS-grids
since they provide more flexibility on the number of cards to show according to screen size or add a proper gap between the cards.Here is a working example of your code using CSS-grids:
I think it’s a line of code that is missing in your css code. In the class ‘.card-container’, you might want to add this line :
flex-direction: row;
Also, in your html page, you want your cards to be in the same container. Right now, each of your cards are in a distinct container. If you want them to be in a row, you then have to put them in the same container. Your code should look something like that :