Reputation: 1435
I am working in my Ionic App and I am facing the problem for the UI in IOS. Like I have added the CSS for the android and the common CSS but it is not working in the IOS.
My CSS:
ion-label.label.label-md {
font-size: 14px;
font-weight: 300;
}
ion-label.label.label-ios {
font-size: 14px;
font-weight: 300;
}
This is working fine in both Android & IOS but I have define separately for the both.
And The Common CSS:
ion-label.label {
font-size: 14px !important;
font-weight: 300 !important;
}
In this, It is working fine for the both but I have to define the !important for that.
So, I want to define the CSS that will work for both the Android and iOS.
Any help is much appreciated.
Upvotes: 0
Views: 1042
Reputation: 612
Add your own CSS classes instead of modifying pre-existing ones. A CSS class with ion
is a pre defined by Ionic and classes with md
or ios
in them are pre defined for the platforms android & ios respectively.
Instead, you should declare your own css class in the HTML and add in the the .SCSS file. This will override the pre defined classes and use the values you have defined. Therefore, your CSS should be
HTML
<div class="my-label"></div>
CSS:
.my-label {
font-size: 14px;
font-weight: 300;
}
If you are still unable to see the css being applied, check if the class is being applied correctly.
Upvotes: 2