Display Problem on Mobile Device

Ionic Framework ionic-v3
1

I am having problem with the display. When I open my ionic app on desktop i get the below UI which I want.
Capture

But I when I build this and run on my mobile device I get the following .

Screenshot_20190408-115048
Screenshot_20190408-115048.jpg1080×1704 62.7 KB

This is my Variable SCSS Code.

ion-button {
  --ion-color-primary:linear-gradient(to right, #c33764 0%, #1d2671 100%);
   background: var(--ion-color-primary);
}
ion-content {
    // border-top-right-radius: 20px;
    --ion-color-primary:linear-gradient(to right, #c33764 0%, #1d2671 100%);
    --background:  var(--ion-color-primary);
}

ion-toolbar{
  padding-left: 10%;
  border-bottom-left-radius: 70%;
  --ion-color-primary:linear-gradient(to right, #c33764 0%, #1d2671 100%);
  --background:  var(--ion-color-primary);
  color:white;

}

Does anyone has solution to this…why only my ion-button changes but not the content and the toolbar???

2

as i see your background color is not working in device

3

Yes What can I do to solve this…