I want to adjust the size of my lightbox, but I'm facing some issues. When I set max-width: 100%, the images appear too large for PC screens (img) and too small for cellphones (img). Conversely, with a max-width: 50% setting, the images are just right (img1 and img2). What should be my approach?
CSS:
/* The Modal (background) */
#galeria .modal {
display: none; /* Initially hidden */
position: fixed; /* Fixed position */
z-index: 1; /* Top layer */
padding-top: 100px; /* Positioning */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Scroll enabled if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.6); /* Black with opacity */
}
/* Modal Content */
#galeria .modal-content {
margin: auto;
padding: 20px;
max-width: 50%;
}
HTML:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="close-button"><span class="close" id="close-sync">×</span></div>
<div id="sync1" class="owl-carousel">
<div class="item">
<img src="assets/img/eventos/16-12-2016/01.JPG">
</div>
<div class="item">
<img src="assets/img/eventos/16-12-2016/02.JPG">
</div>
</div>
<div id="sync2" class="owl-carousel">
<div class="item">
<img src="assets/img/eventos/16-12-2016/01.JPG">
</div>
</div>
</div>
</div>