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

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

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;