Can someone assist me in creating responsive DIV
s with images inside?
Currently, the second div is appearing below the first one, and I'm struggling to make them scale based on mobile and tablet screen sizes.
Here is the code snippet:
.new_banner_homepage {
width: 570px;
float: left;
min-height: 1px;
margin-left: 30px;
margin-bottom: 20px;
border-radius: 5px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
transition: all 0.2s linear 0s;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
}
@media only screen and (max-width: 239px) {
.new_banner_homepage {
width: 90%;
}
}
<div class="new_banner_homepage">
<a href="#">
<img data-retina="true" src="http://placehold.it/570x150" alt="">
</a>
</div>
<div class="new_banner_homepage">
<a href="#">
<img data-retina="true" src="http://placehold.it/570x150" alt="">
</a>
</div>