How to reduce ionic cards margins

Ionic Framework ionic-v3
1

I wan to use cards but for me margins of cards is looking big and I want to reduce it.The fallowing code was not effective.

    ion-card{
        margin-left: 0px;
        margin-right: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
2

Dears, Please.
No any Idea?

3

Try adding .card-ios and .card-md and see if it helps.

ion-card, .card-ios, .card-md {
  // your css
  }

If all else fails, try adding !important to your lines.

ion-card, .card-ios, .card-md {
  margin: 20px !important!
  }

It may also be that .ion-card is the right syntax as opposed to ion-card. Don’t know off hand.

4

I used fallowing code :

page-post {

  .ion-card, .card-ios, .card-md {
    margin-top: 0px  !important;
    margin-bottom: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }


}

and as you can see the result right side is 0 margin but left and bottom are not 0;

image
image.png1366×768 120 KB

5

You must overwrite ionic sass variables adding it to your variables.scss file.

Open the provided link and search for “card margin”.

Please, mark this post as the topic’s solution to help others with this same question.