[SOLVED] Padding or Margin in ion-grid

Hi :slight_smile:

How Can I removo the space designate by the red arrow in the picture, I try to remove padding and margin but that doesn’t work as expected…

Show me your code first.

1 Like
   <ion-grid>
      <ion-row justify-content-center>
        <ion-col class='cardRestaurant' *ngFor="let restaurant of restaurants" col-6>
          <ion-card (tap)='showDiner(restaurant)'>
            <img [src]="'assets/images/'+ restaurant.imagee"  class="imgCardMain" />
            <ion-card-content>
              <ion-card-title>
                <span class="textCardRestaurant">{{ restaurant.title }}</span>
                <span class="sousTextCardRestaurant"><br>{{ restaurant.type }}</span>
                <span class="sousTextCardRestaurant">Prix = {{ restaurant.prix }}€</span>
                <span class="textCardRestaurant"><br>{{ restaurant.avis }}</span><span class="note">/10</span>
                <img src="assets/images/trip.png" class="imgTrip">
                <span class="reduction"><br>{{ restaurant.reduction }}% sur la carte</span>
              </ion-card-title>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-list>

Thanks for your help :slight_smile:

do you have padding in <ion-content> ?

<ion-content id="mainPage" (ionScroll)="hiddenElement($event)">

No…

so you need to override style in file scss if you want to remove padding

it because the grid has it own padding , and card has it own padding too

On witch element ?

Because I try on ion-card, row, grid, column so I don’t know where remove the padding ?

try copy this in to file scss

ion-grid{
        ion-card{
            width:100%;
            margin-left:0 !important;
            margin-right:0 !important;
            ion-card-content{
                padding: 0 !important; 
            }
        }
    }

That doesn’t work but I don’t understand why, it’s like ion-grid reduce my element…

You can remove my code and try to inspect element on your project to see the real problem.

My playground similar to you

Yes, I want the same result as you :frowning:

When I inspect, I found just a little margin with ion-col but nothing to explain this blank…

Try this then


ion-row{
        ion-card{
            width:100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        img{
            width:100%;
        }
    }
   }
4 Likes


I have loose the intern margin but the problem is not solved :frowning:

Try to add attr no-padding in ion-content then overwrite the ion-card set margin:0 and width:100%

Result:

Thanks for your answer :slight_smile:

I obtain this result

image

I have no margin/padding intern…

@Chungtheng

Yout method is perfect, I have forgot to delete a css property in variable.scss sorry…

1 Like

This means you do have padding on the content, to remove it you’ve to explicitly use the no-padding attribute. Like this:

<ion-content no-padding>