I'm facing an issue with setting responsive dimensions for a background image within a div that displays differently on mobile. Currently, I am manually specifying the width and height, but I want to avoid doing so. When I try using 100% for the width and either 100% or auto for the height, the image fails to display.
Here is the markup:
<div id="mts-popup" class="white-popup mfp-hide wow slideInDown animated" data-wow-duration=".5s">
<h2>MTS Collective</h2>
<div class="left-half">
<div class="popup-screenshot" id="mts-screenshot"></div>
</div>
</div>
And the CSS:
.white-popup {
position: relative;
background: #fff;
padding: 20px;
width: 100%;
max-width: 1160px;
margin: 30px auto;
border-radius: 5px;
text-align: center;
}
.white-popup .left-half, .white-popup .right-half {
margin: 20px;
}
.white-popup .left-half {
width: 50%;
float: left;
}
.white-popup .right-half {
width: 40%;
}
.white-popup .popup-screenshot {
width: 600px;
height: 456px;
background-size: 100% 100%;
}
.white-popup #mts-screenshot {
background-image: url("../img/portfolio/mts-browser.png");
}
div#mtsm-popup .left-half {
width: 30%;
}
Any assistance on resolving this issue would be greatly appreciated!