I am currently facing an issue while trying to create 3 boxes: one big box and two small ones next to it. Each box contains images, but the problem is that the two small boxes are not responsive on any devices except desktop. I have been troubleshooting this for a while now and still can't figure out what I'm doing wrong.
.fashion_look img {
width: 100%;
display: inline;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.main-container .block-container .fashion_look .content {
position: absolute;
top: 5%;
left: 0%;
width: 100%;
text-align: center;
padding: 0 35px;
}
.main-container .block-container {
display: inline-block;
width: 100%;
float: left;
}
.main-container .widget-static-block {
display: block;
overflow: hidden;
padding-top: 60px;
}
.main-container .block-container .banner_top,
.main-container .block-container .new_shoes,
.main-container .block-container .fashion_look {
position: relative;
overflow: hidden;
}
.main-container .block-container .overlay {
bottom: 0;
height: auto;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.2s ease-in-out 0.1s;
-moz-transition: all 0.2s ease-in-out 0.1s;
-webkit-transition: all 0.2s ease-in-out 0.1s;
-o-transition: all 0.2s ease-in-out 0.1s;
width: auto;
z-index: 2;
}
.main-container .block-container .new_shoes .content {
position: absolute;
top: 10%;
left: 0%;
width: 60%;
text-align: center;
padding: 0 35px;
}<div class="widget widget-static-block">
<div class="block-container">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="fashion_look">
<div class="overlay"> </div>
<a href="https://www.acureorganics.com/skin.html"><img src="#></a><br>
<div class="content">
<h3> </h3>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="new_shoes">
<div class="overlay"> </div>
<img src="#">
<div class="content"> </div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="overlay"> </div>
<div class="banner_top">
<a href="https://www.acureorganics.com/body.html"><img src="#"></a>
</div>
<div class="banner_top">
<div class="content"> </div>
<div class="content"> </div>
</div>
</div>
</div>
</div>
</div>
</div>