Enlever l'espacement du côté de la carte d'ions

Question

en essayant d'enlever l'espacement des côtés de mes cartes d'ion et les rendre 100% de largeur. Jusqu'à présent j'ai essayé tout ce que je peux imaginer mais les carrds ont refusé de régler à 100% de largeur. Ceci est mon code à ce jour:

<ion-content class="Content"> 

<ion-card *ngFor='let rest of modifiedData' (click)="itemSelected(rest.PushPage)" > 
    <img src={{rest.image}}/> 
    <ion-card-content> 
    <ion-card-title> 
    <h1>{{rest.name}}</h1> 
     </ion-card-title> 
    <p>{{rest.text}}</p> 
    </ion-card-content> 
</ion-card> 


    <!-- floating button for maps page --> 
    <ion-fab right bottom > 
    <button ion-fab color="frosted" (click)="Locations()" mini><ion-icon name="pin"></ion-icon></button> 
</ion-fab> 
</ion-content> 

Et mon css:

page-content { 

    .scroll-content { 
     padding-top: 0 !important; 
    } 

    .main-content { 
     background-color: (darkish); 
     box-shadow: 0px -1px 13px 1px rgba(0,0,0,0.3); 
    } 
    ion-card { 
     background-color: #fff; 
     width: 100%; 
     margin: 0; 
     margin-bottom: 25px; 
     position: relative; 
    } 


    ion-item { 
     background-color: #fff; 
    } 
} 

Toute aide grandement appréciée!

Answer 1

Vous pouvez le faire en remplaçant les variables sass fournies dans la documentation API Ionic. Vous pouvez placer le code dans vos fichiers app.scss ou theme/variables.scss afin qu'il prenne un effet global. Quelque chose comme ci-dessous devrait fonctionner.

1. Pour iOS

   $card-ios-margin-left: 0; 
   $card-ios-margin-right: 0; 
   

2. pour Android

   $card-md-margin-left: 0; 
   $card-md-margin-right: 0; 
   

3. pour Windows Phone

   $card-wp-margin-left: 0; 
   $card-wp-margin-right: 0;