how can make this divs as responsive? - html

Question

css stylings:
.products {
display: inline-block;
position: relative;
align-items: ;
margin-top: -4px;
}
.product-cell {
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
}
.product-img {
position: relative;
}
.product-overlay {
background: rgba(0, 0, 0, 0.73);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
}
p.product-name {
position: absolute;
top: 40%;
color: #fff;
z-index: 2;
left: 38%;
font-family: 'Kaushan Script', cursive;
transform: translate(-30%,40%);
font-size: 30px;
}
.product-list {
padding: 5px 0px 0px 10px;
}
HTML code:
I am using bootstrap.but for mobile i am not getting expected output as shown in the images below.for mobile i made .product-cell width as 100%. if it possible us js fiddle to explain.thanks for your valuable information.
i need like this :
.
but I am getting like this:
<div class="products">
<div class="product-cell">
<div class="product-img">
<img src="images/products-electronic.png" class="img-responsive" >
<div class="product-overlay"></div>
<p class="product-name">ELECTRONICS ENGINEERING</p>
</div>
</div>

Answer 1

You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
Hope this helps!