[Kenrick CParticipant]

URL: http://dev.lift3x.com/arstudio/
Latest X / X Shortcodes
WP 3.9.1

The site works more or less as expected on the desktop.

It also responds to my media queries on an iPhone 5s in landscape.

The problem is that it will not respect the media queries for portrait mode for mobiles. I’ve tried every conceivable way of writing the queries from:

@media screen (min-device-width: 300px) and (max-device-width: 479px) {}

to

@media all and (max-device-width: 512px) {}

And it always jumps down to the landscape queries CSS. It even shows it in Safari developer tools as recognizing that the other query exists but it just overwrites it for some reason. Both the portrait and landscape use !important to overwrite the default (desktop) values and the portrait queries even come before the landscape queries. If I switch the order, I just get the opposite problem.

Any help would be greatly appreciated.

[RadModerator]

Hi Kenrick,

Thank you for writing in!

What does your media query should do? Any screen video recording would help.

Thank you.

[Kenrick CParticipant]

That is a screenshot of my physical iphone 5s being debugged in Safari.

If you look at the site you will see that my specific media queries are not being respected. For example, look at the CSS beign applied (line 240):

.antiqueBtn{
min-width: 145px !important;
min-height: 145px !important;
background: url(‘http://dev.lift3x.com/arstudio/wp-content/uploads/2014/05/restoreBtnMobi.png’) !important;
}

That style is being applied when the viewport is in portrait and should be using line 169

.antiqueBtn{
min-width: 90px !important;
min-height: 90px !important;
background: url(‘http://dev.lift3x.com/arstudio/wp-content/uploads/2014/05/restoreBtn90.png’) !important;
}

The latter should be changing the size of the buttons to work with the smaller screen. However, the rule is being ignored even though the media query clearly states that the 145px image should only be used when:

@media screen (min-device-width: 567px) and (max-device-width: 853px).

Does that clear it up?

[Kenrick CParticipant]

Sorry link to screenshot didn’t work for some reason: https://drive.google.com/file/d/0Bzs01iCupi4VSmN5V2R0ckpISk0/edit?usp=sharing

I’ve even tried getting rid of the !important but still resisting.

[RadModerator]

Hi Kenrick,

It doesn’t work on desktop too, when resized and I don’t see any media query implemented, unless by viewing html source.

Could you simplify this?

@media only screen (min-device-width: 300px) and (max-device-width: 512px) and (orientation:portrait) {

into this :

@media (min-width: 300px) and (max-width: 512px) {

And let me know.

Thank you.

[Kenrick CParticipant]

Awesome! That appears to have done the trick. Thanks!

[AlexanderKeymaster]

You’re welcome!

[Author]

Posts