cardsagainsthumanity.com - mobile site is not usable

[lquinn]

URL: http://cardsagainsthumanity.com/ Browser / Version: BlackBerry Browser 10.3.2 Operating System: BlackBerry 10.3.2 Problem type: Mobile site is not usable

Steps to Reproduce 1) Navigate to: http://cardsagainsthumanity.com/

Expected Behavior: The site should be usable on smartphones such as the BlackBerry Passport, Classic, Q10, and Q5.

Actual Behavior: The site says "Turn your phone around, asshole." Rotating the phone between portrait and landscape does not change the message in the case of the BlackBerry Passport, Classic, Q10, and Q5 (which all have a square screen).

From webcompat.com with ❤️

[lquinn]

http://cardsagainsthumanity.com/v8/stylesheets/main-135a8397.css has the problematic CSS:

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    body:not(.android) {
        background:url("/v8/images/turn-6675398d.png") center center no-repeat;
        background-size: cover
    }

    body:not(.android) .wrap {
        display: none
    }
}

The "orientation: landscape" media query always matches on a BlackBerry Passport, Classic, Q10, and Q5 because they have a square screen with some vertical space used for a navigation bar. That makes the site completely inaccessible on these devices.

The CSS seems intended as a joke for iPhone users. I'm not sure why Android users are excluded from the joke.

[adamopenweb]

Thanks @lquinn! The animation in header section disappears when you rotate the phone to landscape in Chrome, Firefox and Opera on Android. There is no "turn your phone around" message and the site is still usable.

[lquinn]

Yes, the site has a ":not(.android)" pseudo-class to protect Android users.

[lquinn]

@emhaasch, would you have any contacts at Cards Against Humanity who could help?

[lquinn]

@jonbuda, can you help?

[jonbuda]

@lquinn Thanks everyone. We'll look into it!

[ghost]

Hey @lquinn — sadly, I don't work with CAH any more. Please direct your inquiries to Jon or the rest of the dev team. Thanks!

[lquinn]

@jonbuda, can you give an update? Could BlackBerry be treated the same as Android here in https://cardsagainsthumanity.com/v8/stylesheets/main-0856f344.css :

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    body:not(.android) {
        background:url("/v8/images/turn-6675398d.png") center center no-repeat;
        background-size: cover
    }

    body:not(.android) .wrap {
        display: none
    }
}

[lquinn]

@jonbuda, any chance of getting this fixed?

[reinhart1010]

This issue is still reproducible in BlackBerry 10.3.2, BlackBerry Q5.

[cipriansv]

Closing the issue as incomplete since Blackberry OS is no longer available.