Shalu Salodia
Posts: 0
Joined: Wed Feb 25, 2015 10:39 am

CSS Media query is not working while testing app in android mobile phone

I have created external CSS file and add media query to it for different screen sizes that is given in appery.io browser like 240 X 320, 320 x 480 so on. CSS Media query is working if app is testing in Appery.io browser but it doesnt work if testing an app in android phone.

I am struggling since a week :(

andrew lautenbach
Posts: 0
Joined: Wed Feb 25, 2015 11:10 am

CSS Media query is not working while testing app in android mobile phone

try to use !important?
like this:

@media screen and (min-height: 451px) and (max-height: 600px) {
.maps {
height:250px !important;
}
}

Shalu Salodia
Posts: 0
Joined: Wed Feb 25, 2015 10:39 am

CSS Media query is not working while testing app in android mobile phone

Thanks !

But i have use important already in my css like :

@media only screen and (min-width : 320px) and (max-width : 399px) and (orientation : portrait) {
.hsa_your_annual_contribution_mobilelabel_3
{
top: 33% !important;
left: 22% !important;
font-size: 12px !important;
}
}

andrew lautenbach
Posts: 0
Joined: Wed Feb 25, 2015 11:10 am

CSS Media query is not working while testing app in android mobile phone

hmm get rid of: only
@media screen and (min-width : 320px) and (max-width : 399px) and (orientation : portrait) {
.hsa_your_annual_contribution_mobilelabel_3
{
top: 33% !important;
left: 22% !important;
font-size: 12px !important;
}
}

andrew lautenbach
Posts: 0
Joined: Wed Feb 25, 2015 11:10 am

CSS Media query is not working while testing app in android mobile phone

are u sure u have the correct class name on ur label?

Shalu Salodia
Posts: 0
Joined: Wed Feb 25, 2015 10:39 am

CSS Media query is not working while testing app in android mobile phone

yes of course ! It is just a snippet of media query, i have used media query on other pages too that also not working.

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

CSS Media query is not working while testing app in android mobile phone

Hi Shalu,

You can test media query with following way(step - by - step instruction):

  1. Create new CSS asset in your app.
    Details: http://prntscr.com/6a9um3/direct

  2. Populate it with following CSS code:
    Details: http://prntscr.com/6a9qe9/direct

    pre

    @media screen and (max-width: 1000px) {
    [data-role="content"] {
    background: url(http://mypets.kiev.ua/sites/default/files/admin/59_13.jpg);
    background-size: cover;
    }
    }

    /pre

  3. Run app without frame(to have ability to change document size):.
    Details: http://prntscr.com/6a9uww/direct

  4. Make browser more then 1000px by width, you have app without background.
    Details: http://prntscr.com/6a9vqw/direct

  5. Make browser less then 1000px by width, you have app without background.
    Details: http://prntscr.com/6a9wnw/direct

    After correct test - you can change inside styles.

    Regards.

Return to “Issues”