0

I'm making a template that is adaptable for mobile in landscape and portrait mode, i have to "remove" some objects because there is no space in landscape, then I used display:none in the landscape, and set the normal dimensions for portrait, but when I go into the phone, and make the switch landscape to portrait the objects disappear even in portrait mode...

more or less the css structure is this:

@media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1080px) and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}


@media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1920px) and (orientation: landscape) {.object {display:none}}

any advice? :)

1 Answers1

0

In your media queries you say that every device with -webkit-min-device-pixel-ratio: 1.5 gets both of the CSS properties....

If you only want to make a difference between landscape and portrait, you should youse something like this:

@media only screen and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}


@media only screen and (orientation: landscape) {.object {display:none}}

The other media queries are not necesarry.

constantine
  • 86
  • 7
  • i use another mobile media query in addition to these, i can't generalize –  Aug 04 '14 at 09:36
  • OK, no problem. You can add these lines and then use another lines with more specific media queries, or you can add your media queries like this: `@media only screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}} ` – constantine Aug 04 '14 at 12:13
  • Thanks for the solution, but I get the same error, there is a solution even in javascript that don't delete the element in both orientations? –  Aug 05 '14 at 08:58
  • After several trials, I think it's a problem of inheritance of different device css media queries, I do not know why they depend on each other, is there any way to get them not to depend on? –  Aug 05 '14 at 13:33
  • Either you can put the queries I showed you to the end of your css files (to the last css file), so it's not overwritten by some other rules. Or you can add `!important` to the rules, so it should not be overwritten: `.object {display:none !important;}` – constantine Aug 06 '14 at 07:59
  • Can I have a look at the site live? Or can you send relevant CSS and media queries to a [jsfiddle](http://jsfiddle.net/) ? – constantine Aug 18 '14 at 07:13