How to I reduce the margins in between 2 cards

<div class="card">
  <div class="item item-text-wrap item-icon-right">
      <i class = ion icon-example ....>{{groceries}}</i>
            Card content xyz 
  </div>
</div>

My question relates to the spacing between 2 or more cards in a vertical list.
I tried using css by tweaking margin-top or bottom, padding and background-size but nothing seems to work?

I have also an enlarged icon where inside is a text that displays the number of groceries.

Would cards be better or inset lists? I read inset-list is better if individual card(s) are heavy on content.
My card content is light but there would be many cards in the list.

When trying to override ionic’s CSS use the important flag in CSS.

.card
{
     margin-bottom: 5px !important;
}

The following worked for me

3 Likes

Thanks MWright!

Would you also happen to know how to insert a text within an enlarged icon?

When I use css to say font-size: 60px …the icon enlarges, but so does the font inside. How do I make the font smaller to fit in the enlarged icon?

Give the icon a CSS class with the font-size: 60px

<div class="card">
<div class="item item-text-wrap item-icon-right">
      <i class = ion icon-example mybigicon ....>{{groceries}}</i>
            Card content xyz 
  </div>
</div>

then in CSS do

.mybigicon
{
    font-size: 60px !important;
}

Then wrap the {{groceries}} in a span

<span class="smallertext">{{groceries}}</span>

.smallertext
{
    font-size: 18px !important;
}

I tried this, doesnt work. It creates an additional layer of margin on top of the existing one i want to change.

Try tweaking this example in codepen.

Try using badges, or if you don’t like the colour then remove badge-assertive/balanced

or full view

Thanks @MWright24, would u know how to pull the 2 cards closer together using the codepen?

just add this CSS

.card
{
    margin-bottom: -10px !important;
}
    ion-item ion-label {
        margin: 0 !important;
    }

I am not sure of the consequences, so please use at your own discretion. Works as of Ionic v3.19.1