Custom CSS styles:
.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;
}
Your HTML code:
I am currently using Bootstrap, however, I am facing issues with the layout on mobile devices. I have attached images below to demonstrate the expected output and the actual output I am receiving on mobile. Can you please use jsFiddle to provide an explanation? Your help is greatly appreciated.
https://i.sstatic.net/aH5HT.png
Expected output:
https://i.sstatic.net/siC0F.png.
Actual output:
https://i.sstatic.net/5G2I7.png
<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>