Cards in iOS vs Android

Hi everyone,
I have some doubts about styles that i cannot fix.
We are developing an app for Android and iOS. The landing page has cards to select where you want to go.
The cards are displayed in two columns becouse the styles (it is the way we want to appear). But on iOS the cards are not getting the styles right, and they expand to get all the space avaiable .

This is the code html

<ion-content>
          <ion-card  *ngFor="let item of menu; let i = index" [attr.data-index]="i" (click)="navigateToCardContent($event, i+1)">
            <img src="{{item.picture}}"/>
              <ion-badge class="card-badge" item-start color="naranja" *ngIf="novisto[i]!= 0 && lenguaje=='es'">{{novisto[i]}}</ion-badge>
              <ion-badge class="card-badge" item-start color="naranja" *ngIf="novistoeu[i]!= 0 && lenguaje=='eu'">{{novistoeu[i]}}</ion-badge>
            <ion-label *ngIf="lenguaje=='es'" class="card-title">{{ item.namees | uppercase }}</ion-label>
            <ion-label *ngIf="lenguaje=='eu'" class="card-title">{{ item.nameeu | uppercase }}</ion-label>
          </ion-card >
</ion-content>

And the css:

page-home {

    .logo{
        position: fixed;
        height: 75px;
        top: -35px;
        right:45%;

    }
    .card-md:nth-child(even) {
        float: right;
    }
    .card-md {
        width: 48%;
        display: inline-block;
        margin: 1px 0px;
        height: 25% !important;
        position: relative;
    }

    img{
        height: 100%;
    }

    .card-badge {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 0;
        width: 30px;
    }![Android|320x500](upload://w4QFhXvHs81q92xqaZysAOV2p4Z.jpg)
    ion-label {
        position: absolute;
        left: 0;
        bottom: 0;
        color: white;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        padding: 5px;
        text-align: center;
        margin: 0 !important;
    }

}

Anybody can help?

Thank you.

Try adding, where you have .card-md, .card-ios separated by a comma

 .card-md, .card-ios {
  
  }

Generally, ios specific css naming conventions place ios before or after the line of code, separated by a hyphen.

So, if you’re also facing issues with card-badge, the solution is probably either

.card-badge-ios

or

.ios-card-badge

And can just be added as a value, separated by a comma like the above example

1 Like