Ionic page style broken when build apk

Ionic Framework ionic-v3
1

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:

style
style.PNG310×550 11.2 KB

Workin fine

no-style
no-style.jpg720×1280 39.5 KB

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");
    }
}
1 Like
2

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

3

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
4

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.