Percentage margin-bottom Media query not working Jquery

0
votes

Ive been building a small image lightbox and im trying to make the width of the image and its containing div 100% of the page when the screen size is 600px, but my media query wont execute for some reason. Does this have to do with the margin-bottom being a percentage? Thanks https://jsfiddle.net/egL1offh/

@media screen and (max-width: 600px){
  .lightboxCenter{
    position: fixed;
    width: 100%;
    margin-bottom: 17.5%;
    margin-top: auto;
    top: 25%;
  }

  .lightboxCenter>img{
    position: fixed;
    width: 100%;
    margin-bottom: 17.5%;
    margin-top: auto;
    top: 25%;
  }

}
1
javascriptjqueryhtmlcss

1 Answers

1
votes

See I couldn't find anything inside of .lightboxCenter i.e. it is empty and this what you are declaring in media query .lightboxCenter > img, so it won't works, as you are selecting a child element, but it's a empty div. img tag is present inside .imageGallery, so you need to use that to scale your image 100% at max-width of 600px as below,

@media screen and (max-width: 600px){
.imageGallery{
  width:100%;
  height:auto;
}
.imageGallery > img{
  width:100%;
}
}