Fondation Zurb - Enlever le rembourrage de grille sur les écrans plus petits?

Question

Je suis en train de supprimer le droit de remplissage et de gauche à l'écran plus petit pour les éléments de la grille ci-dessous:

<!-- row block --> 
<div class="row row-cards"> 

    <!-- grid container --> 
    <div class="grid-container"> 

     <!-- grid x --> 
     <div class="grid-x grid-padding-x"> 

      <!-- item --> 
      <div class="cell medium-6"> 
       xxx 
      </div> 
      <!-- item --> 

      <!-- item --> 
      <div class="cell medium-6"> 
       xxx 
      </div> 
      <!-- item --> 

     </div> 

    </div> 

</div> 
<!-- row block --> 

CSS:

/* Small only */ 
@media screen and (max-width: 39.9375em) { 
    .row-cards { 
     .grid-container { 
      padding: 0; 
     } 

     .grid-padding-x { 
      padding: 0; 

      .cell { 
       padding: 0 !important; 
      } 
     } 
    } 
} 

Mais l'écrasement ne fonctionne pas. Voici ce que je reçois:

C'est ce que je suis en train de faire:

Toutes les idées?

Answer 1

Avez-vous essayé la classe .small-margin-collapse sur votre grille-x pellicule, comme ceci:

<div class="grid-x grid-padding-x small-margin-collapse">

https://foundation.zurb.com/sites/docs/xy-grid.html#collapse-cells

Answer 2

Mon bidouille (MOINS):

/* Small only */ 
@media screen and (max-width: 39.9375em) { 
    .row { 
     background-color: #ffffff; 

     .grid-container { 
      padding-right: 10px; // a temporary hack 
      padding-left: 10px; // a temporary hack 
      max-width: 100%; 
      margin: 0 auto; 
     } 

     .grid-padding-x { 
      .cell { 
       padding-right: 0; 
       padding-left: 0; 
      } 
     } 

    } 
}