How to I reduce the margins in between 2 cards

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

2

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
3

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?

4

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;
}
5

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.

6

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

or full view

7

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

8

just add this CSS

.card
{
    margin-bottom: -10px !important;
}
9 
    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