Search code examples
htmlcssresponsive-designmedia-queries

Image max-width not working in media query

I'm having an issue with max-width/max-height inside of media queries. Basically what's happening is I have an image gallery that uses jQuery to display a modal window. This modal window consists of the modal, a content box, and an image viewer which has some buttons inside for navigation thru images). I have the max-width/max-height set in vw and vh in css but the exit button gets cut off on a mobile device.

Current CSS: 

#photoViewer {
display: inline-block;
position: relative;
margin: 0 auto;
width: 0;
height: 0;
transition: width 0.5s, height 0.5s;
}

#photoViewer img {
position: absolute;
top: 50%;
left: 50%;
max-height: 70vh;
max-width: 70vw;
}

I tried using a media query: 

@media screen and (max-width: 955px) {
   #photoViewer img {
      max-width: 50vw;
      max-height: 50vh;
   }
}

but it's not changing anything. I found if set hard "width" and "height" rules it works but the max- seems to throw it off. Any ideas?

Here's a fiddle that demonstrates kind of what I'm working with (my whole code is pretty large):

https://jsfiddle.net/jessereitz1/6nxg21a3/3/

Solution

  • At least in the fiddle you posted it works:

    The images' original sizes there are only 200x133px or vice versa. With max-width/ max-height values they will never get larger than their original size.

    Only if the screen/viewport becomes less than 400px wide, the max-width: 50% will have an effect (for landscape mode images, that is - portrait even less: narrower than 266px).