CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
jscss
jscss

Reputation: 31

CSS width media query gets invalidated when height <= width

I am creating a two-column layout - left fixed, right fluid - and I'm using a media query to put the left column below the right (which is the main content) if the screen resolution is between 320 and 649 px (portrait or landscape).

When I test the layout to see how it responds to changing the width of the screen, it works just fine. However, when I start changing the height, at some point the breakpoint rule specified in the media query gets invalidated and the layout reverts back to the default.

I noticed that this point of invalidation is just when the height becomes equal to the width. For example, if I resize the browser (I'm using Chrome Canary developer console) to a width of 480px, everything works fine as per the media query as long as the height of the window is greater than 480px. The moment I resize the height to less than the width, say 479px, the rule in the media query ceases to hold and the layout reverts back to the original.

Here's an abbreviated excerpt of how the layout code looks:

HTML: 

<div class="wrapper">
<div class="content"></div>
<div class="left_column"></div>
</div>

CSS:

.wrapper: {width:100%;} 
.content 
{
margin-left:240px;
 float:left;}
.left_column 
{
width:240px;
 margin-left:-100%;
 float:left;
}


@media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: portrait) {

.content 
{
margin-left:0;
 float:left;}
.left_column 
{
width:100%;
 margin-left:0;
 float:left;
}

}

@media only screen and (min-width: 320px) and (max-width: 649px) and (orientation: landscape) {

.content 
{
margin-left:0;
 float:left;}
.left_column 
{
width:100%;
 margin-left:0;
 float:left;
}

}

I'm not sure what's causing this change in the layout when the height is altered since I don't have any media queries that specify height. Does anybody have any clue what the issue could be?

Upvotes: 2

Views: 282

Answers (1)

jscss
jscss

Reputation: 31

Managed to find the mistake - code for portrait query was different from that for landscape query.

Upvotes: 1

Related Questions