CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Purify
Purify

Reputation: 589

Media query issue. Landscape and portrait

I've done a few searches around stackoverflow but none of them seem to address my issue, therefore I'm posting here.

I have a table. It had six rows. I have done a media query (@media only screen and (max-device-width: 480px)) so that the table doesn't contort the page when viewing on a mobile phone. The media query itself is essentially just doing display: none; on the tr classes.

The problem I'm having however is that the max-device-width is set to 480px. So naturally one would think that when that is exceeded, the fields would return. My mobile phone (Nokia Lumia 800) has a resolution of 480x800 and so in portrait it should hide the tr's. In landscape however they SHOULD reappear since that would be the resolution 800x480. This is essentially my issue. They aren't reappearing despite having done a viewport test and it saying that it is.

Does anyone have any idea why this would happen?

Upvotes: 1

Views: 1076

Answers (2)

Eggineer
Eggineer

Reputation: 214

Try this

For devices >480px

@media(min-width:481px){
 tr{
    display:table-row ; /* to show table row*/
  }
}

For devices less than 480px

@media(max-width:480px){
 tr{
    display:none;  /* to hide table row*/
  }
}

Upvotes: 0

JerryHuang.me
JerryHuang.me

Reputation: 1790

Essentially what is happening in your code is when users are below 480px, you are telling the css to hide the element and the state is saved on run-time. When the user goes beyond 480px, you don't have a rule to bring this element out of (display:none) state.

CSS works in cascades, so the very last rule given to it would be the one a browser would default to.

If you have a query stating below 480px display: hide, you would need another query to state above 480px display: block.

Upvotes: 1

Related Questions