CODEWITHSUNDEEP
cssmedia-queries
Nijesh
Nijesh

Reputation: 129

Media Query Solution

There is a problem when I'm using a background image for the header. The header height is 100vh and the image is displaying fine in computers and landscape devices. But when I view it on portrait devices or screens the background gets messy. My real question is:

Is there a way to display different images for landscape and portrait screens?

Upvotes: 1

Views: 40

Answers (1)

Andre Pena
Andre Pena

Reputation: 59336

Just use the orientation media query.

@media all and (orientation: portrait) { ... }

@media all and (orientation: landscape) { ... }

Of course you can just use media queries the regular way, but by using SASS (and probably LESS), you can change how your class works in different orientations by doing something like:

.my-class {
    background: [normal background]; // assuming the default is portrait
    @media all and (orientation: landscape) { 
        // override for landscape
        background: [landscape background];
    }
}

Upvotes: 3

Related Questions