Cards in iOS vs Android

@LKSUser wrote:

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.

Android.PNG352x550 228 KB

iOS.PNG412x572 185 KB

Posts: 1

Participants: 1

Read full topic