My website is live, and I'm working on making it mobile-friendly. Most of the site works well on mobile, but I'm having trouble centering a jquery lightbox function using media queries. I'm not sure if my syntax is wrong or if there's a fundamental issue with how the media query interacts with the jquery code.
Here's the CSS I have:
#lightbox{position: fixed;
top: 0;
left: 0;
width:100%;
overflow-x: scroll;
height: 100%;
background: rgba(0, 0, 0, .95);}
#lightbox img {box-shadow:0 0 25px #111;
-webkit-box-shadow:0 0 25px #111;
-moz-box-shadow:0 0 25px #111;
height: auto;
width: 750px;
margin-top: 2%;
margin-left: 21%;
margin-bottom: 2%;}
@media only screen and (max-width: 500px){
#lightbox img {margin-top: 10%;
margin-left: 15%;}
}
}
And here's the Jquery code:
jQuery(document).ready(function($){
$('.lightbox_trigger').click(function(e){
var image_src = $(this).attr("src");
if($('#lightbox').length > 0) {
$('#content').html('<img src="' + image_src + '" />');
$('#lightbox').show();
}
else{
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<img src="' + image_src + '" />'
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('#lightbox').live('click', function(){
$('#lightbox').hide();
});
});
I've tried different variations like moving the media query outside the closing bracket of the #lightbox img tag, as well as removing #lightbox from the media query completely, but nothing seems to affect the mobile display. I'm new to web design and struggling to articulate my question due to my limited understanding. Any help would be appreciated!