Dev Hig Dev Hig - 16 days ago 33
Sass (Sass) Question

Remove spacing from side of Ion-card

im trying to remove the spacing from the sides of my ion-cards and make them 100% width. So far ive tried all i can imagine but the carrds have refused to set to 100% width. This is my code so far:

<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>


And my 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;
}
}


Any help greatly appreciated!

Answer Source

You can do this by overriding sass variables provided in the Ionic API documentation. You can place the code in your app.scss or theme/variables.scss files so it takes global effect. Something like below should work.

  1. For iOS

     $card-ios-margin-left: 0;
     $card-ios-margin-right: 0;
    
  2. For Android

     $card-md-margin-left: 0;
     $card-md-margin-right: 0;
    
  3. For Windows Phone

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