0

I have an image gallery that I'm trying to make mobile friendly. I've gotten everything to work until this final part; switching from portrait to landscape.

It looks great when viewed in landscape, but the when switched to portrait, the landscape rules are still being applied and it's causing the images to be cropped.

CSS:

@media (max-width:700px) {
        .slideshow-image img { left:-33%; }
}


@media (max-width:960px) {      
    .slideshow-image img { left:0; }
}

If I add !important to the first rule, it always applies and overwrites the second, so then it looks good in portrait, but not landscape. I'm not sure what I'm missing. All of my other media queries work just fine.

stinkysGTI
  • 573
  • 6
  • 21
  • `@media (max-width:960px)` should be `@media (min-width: 700px) and (max-width:960px)` –  Jul 03 '15 at 19:01

1 Answers1

1

With the code you wrote, the last value is the one that the browser is always going to use (with resolutions up to 960px).

When there are more than one selector matching an element, the last defined value will be the one that is going to be taken into account by the browser (obviously, if there are not inline styles or "important!" clauses).

If you want to create a specific rule for resolutions greater that 700px and smaller than 960px, you should use:

@media (min-width: 700px) and (max-width:960px)

Hope this helps!

Mindastic
  • 4,023
  • 3
  • 19
  • 20