Utilizing Magnific Popup for presenting two sections of content side by side has been a bit challenging. The left section features a div with a background image that varies in size, causing issues with responsive styling to fit the containers properly.
Currently, I have resorted to manually setting widths and heights for each image, but I would prefer a more flexible approach. I have chosen to use background images instead of img elements to allow for different images on mobile devices.
I have experimented with different combinations of background-size, position, and height values without success. I believe understanding the root cause of the issue will lead me to a solution. My hunch is that the problem lies within one of the image div's containers.
HTML:
<div class="left-half">
<div class="popup-screenshot" id="mts-screenshot"></div>
</div>
<div class="right-half">
<h3>Description</h3>
<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.</p>
<p>
<h3>Details</h3>
<ul>
<li><span>Date:</span> December 2011 - Present</li>
<li><span>Category:</span> Design/development</li>
<li><span>Technologies:</span> XHTML/CSS3, JavaScript/jQuery</li>
</ul>
</p>
<p><a href="http://www.mtscollective.com" target="_blank" class="btn btn-primary btn-xl">Launch Website</a></p>
</div>
CSS:
.left-half, .white-popup .right-half {
margin: 20px;
}
.left-half {
width: 50%;
float: left;
}
.right-half {
width: 40%;
}
.popup-screenshot {
width: 600px;
height: 450px;
background-size: 100% 100%;
}
#mts-screenshot {
background-image: url("http://i.imgur.com/upKnQUT.png");
}
div#mtsm-popup {
max-width: 800px;
}
div#mtsm-popup .left-half {
width: 30%;
}
div#mtsm-popup .right-half {
width: 55%;
}
div#mtsm-screenshot.popup-screenshot {
width: 266px;
height: 542px;
background-size: 100% 100%;
}
#mtsm-screenshot {
background-image: url("http://i.imgur.com/NghCrTD.jpg");
}
#api-screenshot {
background-image: url("http://i.imgur.com/Wysc9he.png");
}
.right-half {
float: right;
text-align: left;
}
Demo: http://jsfiddle.net/3gLyhad3/1/
Any assistance on this matter would be greatly appreciated!