CODEWITHSUNDEEP
cssmedia-queries
emcolsson
emcolsson

Reputation: 19

Media query overriding my default css

Im learning how to use media queries and I think I am getting somewhere, only I dont understand why this query override the default css?

 @media screen and (max-width: 735px), screen and (max-height: 415px), screen and (orientation: landscape) {

        #site-header img {
            width: 50%; 
        }
}

It makes my headerimg to be 50% at my desktop full view as well, even though I specifically set that to 100% prior to the media query - and the requirements arent met, so why are the value still used?

It is the last screen and (orientation: landscape) that doesnt work, if I remove that, page look normal on full size desktop and as it should in landscape mobile device, but not in mobile portrait. Why is the landscape affecting normal fullview and portrait mobile device?

Upvotes: 0

Views: 188

Answers (1)

StefanBob
StefanBob

Reputation: 5128

Hey so you're last media query is just asking for if the screen is orientation: landscape, which means the width of the screen is wider than the height of the screen. This applies to desktop too.

So yea just remove that last one, or usually we combine it like: screen and (max-width: 1024px) and (orientation: landscape)

If you want you can just separate out each media query to make it more clear, combined with commas like this is a little confusing.

Upvotes: 1

Related Questions