How to position product cards and make them look proper? - html

Question

Need to position and make my product cards look more like the ones shown in the image below
https://prnt.sc/mip9eb
i have tried using float:left; but it only made 2 of the product cards position correctly.
These were made using bootstrap
.container {
width: 100%;
height: 100%;
}
.container .product {
width: 390px;
height: 130px;
display: flex;
margin: 1em 0;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15);
transition: all .1s ease-in-out;
float: left;
}
.container .product .img-container {
flex: 2;
}
.container .product .img-container img {
object-fit: cover;
width: 100%;
height: 100%;
}
.container .product .product-info {
background: #fff;
flex: 3;
}
.container .product .product-info .product-content {
padding: .2em 0 .2em 1em;
}
.container .product .product-info .product-content h1 {
font-size: 1.5em;
}
.container .product .product-info .product-content p {
color: #636363;
font-size: .9em;
font-weight: bold;
width: 90%;
}
.container .product .product-info .product-content ul li {
color: #636363;
font-size: 9em;
margin-left: 0;
}
.container .product .product-info .product-content .buttons {
padding-top: .4em;
}
.container .product .product-info .product-content .buttons .button {
text-decoration: none;
color: #5e5e5e;
font-weight: bold;
padding: .3em .65em;
border-radius: 2.3px;
transition: all .1s ease-in-out;
}
.container .product .product-info .product-content .buttons .buy {
border: 1px #5e5e5e solid;
}
<div class="container">
<div class="product">
<div class="img-container">
<img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
</div>
<div class="product-info">
<div class="product-content">
<h1>Oculus Go</h1>
<ul>
<li>Lorem ipsum dolor sit ametconsectetu.</li>
<li>adipisicing elit dlanditiis quis ip.</li>
</ul>
<div class="buttons">
<a class="button buy" href="#">More Info</a>
</div>
</div>
</div>
</div>
</div>
Can someone guide me on how i can make the individual product cards look more like the ones in the image and how to position all 3 of them in a row

Answer 1

I think this is more like what you want.. You needed to wrap your product divs in bootstrap col-12 col-lg-4 columns. (see example full screen so the boxes don't wrap). This will show you 1 column layout on mobile and 3 column layout on large devices like desktops.
Some help on your original code:
- You didn't need the float values
- Your font size was also way too big for your boxes.
- Also, try not to specify height and width for the boxes so that the content fits.
.container .product {
display: flex;
margin: 1em 0;
border-radius: 5px;
cursor: pointer;
box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15);
transition: all .1s ease-in-out;
}
.container .product .img-container {
flex: 2;
justify-content: center;
align-items: center;
display: flex;
}
.container .product .img-container img {
width: 100%;
height: auto;
}
.container .product .product-info {
background: #fff;
flex: 3;
}
.container .product .product-info .product-content {
padding: .2em 0 .2em 1em;
}
.container .product .product-info .product-content h1 {
font-size: 1.5em;
}
.container .product .product-info .product-content p {
color: #636363;
font-size: .9em;
font-weight: bold;
width: 90%;
}
.container .product .product-info .product-content ul li {
color: #636363;
margin-left: 0;
}
.container .product .product-info .product-content .buttons {
padding-top: .4em;
}
.container .product .product-info .product-content .buttons .button {
text-decoration: none;
color: #5e5e5e;
font-weight: bold;
padding: .3em .65em;
border-radius: 2.3px;
transition: all .1s ease-in-out;
}
.container .product .product-info .product-content .buttons .buy {
border: 1px #5e5e5e solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-lg-4">
<div class="product">
<div class="img-container">
<img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
</div>
<div class="product-info">
<div class="product-content">
<h1>Oculus Go</h1>
<ul>
<li>Lorem ipsum dolor sit ametconsectetu.</li>
<li>adipisicing elit dlanditiis quis ip.</li>
</ul>
<div class="buttons">
<a class="button buy" href="#">More Info</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="product">
<div class="img-container">
<img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
</div>
<div class="product-info">
<div class="product-content">
<h1>Oculus Go</h1>
<ul>
<li>Lorem ipsum dolor sit ametconsectetu.</li>
<li>adipisicing elit dlanditiis quis ip.</li>
</ul>
<div class="buttons">
<a class="button buy" href="#">More Info</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="product">
<div class="img-container">
<img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
</div>
<div class="product-info">
<div class="product-content">
<h1>Oculus Go</h1>
<ul>
<li>Lorem ipsum dolor sit ametconsectetu.</li>
<li>adipisicing elit dlanditiis quis ip.</li>
</ul>
<div class="buttons">
<a class="button buy" href="#">More Info</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

You should use bootstrap their class names to trigger their styling, bootstap does not require alot of extra css.
You could try using this as a start to your project:
Boostrap Cards documentation
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Oculus Go</h5>
<p class="card-text">Lorem ipsum dolor sit ametconsectetu.</p>
<p class="card-text"><small class="text-muted">adipisicing elit dlanditiis quis ip.</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Oculus Go</h5>
<p class="card-text">Lorem ipsum dolor sit ametconsectetu.</p>
<p class="card-text"><small class="text-muted">adipisicing elit dlanditiis quis ip.</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Oculus Go</h5>
<p class="card-text">Lorem ipsum dolor sit ametconsectetu.</p>
<p class="card-text"><small class="text-muted">adipisicing elit dlanditiis quis ip.</small></p>
</div>
</div>
</div>

Answer 3

Use your each product inside bootstrap column just like below it will atomically position correctly also see the example here. In this example I remove float left and made width 100% from product class
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="product">
</div>
</div>
<div class="col-lg-4">
<div class="product">
</div>
</div>
<div class="col-lg-4">
<div class="product">
</div>
</div>
</div>
</div>

Answer 4

You can get your desired style by much more easier code by using Bootstrap classes. You can try this process:
.container {
margin-top: 50px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="card">
<div class="card-body row">
<img class="card-img-top col-lg-5" src="https://via.placeholder.com/100x100.png?text=Oculus Go" alt="Card image cap">
<div class=" col-lg-7">
<h5 class="card-title">Oculus Go</h5>
<ul class="card-text">
<li>List Text One</li>
<li>List Text Two</li>
</ul>
More Info
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="card">
<div class="card-body row">
<img class="card-img-top col-lg-5" src="https://via.placeholder.com/100x100.png?text=HTC Vive" alt="Card image cap">
<div class=" col-lg-7">
<h5 class="card-title">HTC Vive</h5>
<ul class="card-text">
<li>List Text One</li>
<li>List Text Two</li>
</ul>
More Info
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="card">
<div class="card-body row">
<img class="card-img-top col-lg-5" src="https://via.placeholder.com/100x100.png?text=Cardboard" alt="Card image cap">
<div class=" col-lg-7">
<h5 class="card-title">Cardboard</h5>
<ul class="card-text">
<li>List Text One</li>
<li>List Text Two</li>
</ul>
More Info
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
This design is responsive. Try full screen and different sizes.