Ionic page style broken when build apk

Hi there,

Im having some trouble when styling my app. Basicly, when Im runnig in ‘test mode’ (ionic serve) verything works just fine, but when I deploy the debug version to my phone (ionic cordova run android) the style is almost gone.

Im using Ionic 3, testing in a Motorola Moto x, Android 5.1.

Here the print screen of what happen:


Workin fine


Not working at all

Here is the sass style Im using:

page-dashboard {
    .container{
        background-color: #000;
    }
    .card-container{
        height: 100%;

        .card-row{
            height: 25%;
        }
    }
    .card{
        height: 100%;
        position: relative;
        text-align: center;
        border-radius: 3px;
        background-color: color($colors, "primary");
        transition: background-color 0.3s;
        .card-header{
            position: absolute;
            top: 36%;
            font-size: 2.0em;
            width: 100%;
            font-weight: bold;
            color: #fff;
        }
        .card-body{
            font-size: 1.0em;
            position: absolute;
            padding-top: 1em;
            bottom: 0%;
            height: 30%;
            width: 100%;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.233)
        }
    }
    .card:hover{
        background-color: color($colors, "primary-pressed");
    }
}

maybe you need to provide styles for both android and ios separately?

You could debug your app with chrome dev tools on your device to find the css attributes that don’t get applied.
Here is a guide how you can do it:

1 Like

Solved the issue. It was only my mistake. The Moto x that Im using is a phone from 2013, and the webview in it is a old version. Just updated and worked like a charm. Thank you all.