Zurb Foundation - Remove grid padding on smaller screens? - css

Question

I am trying to remove the padding right and left on smaller screen for the grid items below:
<!-- 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;
}
}
}
}
But the overwrite does not work. This is what I get:
This is what I am trying to get:
Any ideas?

Answer 1

Have you tried the class .small-padding-collapse on your grid-x wrap, like this:
<div class="grid-x grid-padding-x small-padding-collapse">
https://foundation.zurb.com/sites/docs/xy-grid.html#collapse-cells

Answer 2

My hack (LESS):
/* 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;
}
}
}
}