CODEWITHSUNDEEP
css
LauraNMS
LauraNMS

Reputation: 2853

media query for portrait orientation doesn't seem to work

My media query for portrait orientation doesn't seem to work. Any ideas what I'm doing wrong, please?

html:

<div class="titleCard" id="first" style="background-color:white"></div>

css:

html, body { -webkit-backface-visibility:hidden;}

#first {
  background-color: #000;
  width: 100%; max-width: 1920px;
   height: 100%; max-height: 1080px;
   background: url('images/bg.png') no-repeat center; 
   background-size:cover;
   position:relative;
}

.bgwidth { width: 100%; max-width: 1920px; }
.bgheight { height: 100%; max-height: 1080px; }

@media all and (orientation:portrait) { 
    background: url('images/Mobile_Art.jpg') no-repeat center; 
}

Upvotes: 2

Views: 1488

Answers (1)

Ana
Ana

Reputation: 37169

It works (simplified test). It's just that you're not telling it for what element it should change the background when the orientation changes.

You probably meant to have something like:

@media all and (orientation: portrait) { 
    #first {
        background: url('images/Mobile_Art.jpg') no-repeat center; 
    }
}

instead of:

@media all and (orientation:portrait) { 
    background: url('images/Mobile_Art.jpg') no-repeat center; 
}

Upvotes: 1

Related Questions