html - foundation5/css - disable/reset a css property -

html - foundation5/css - disable/reset a css property -

i working foundation , trying convert image working html. sorry using foundation first time. question , isn't much related only. here thing. in foundation, when utilize "block-grids", foundation applies paddings li elements. take no next image.

i have done assign class "last" these 3 li elements , have used

padding-bottom:0px;

for class desired results.

now, when mobile view, next result due above class.

now, know workarounds can utilize media query , assign padding class "last" or can utilize jquery remove class little devices. way, foundation won't 1 applying padding automatically. if disable property, foundation take care of padding. possible? css only?

for situations you, hinted at, media queries tool looking - technically css.

foundation framework, , has default styling, can't create styles work everybody/every project out of box, have found in case.

as avid user of foundation, there many examples, 1 above, have write bit of custom css.

i implement either of following:

only utilize padding-top block grid elements, think eliminating issue here.

$block-grid-elements: 12; $block-grid-default-spacing: 0; // set 0, , manually reset left-right-bottom padding. $align-block-grid-to-grid: true; // somewhere in foundation overrides css file. ul.block-grid { padding: 20px 20px 0 20px; }

otherwise, maintain default padding , write media query code:

<ul> <li></li> <li></li> <li class="last-large"></li> <li class="last-large last-small"></li> <li class="last-large last-small"></li> </ul> @media #{$small-only} { .last-small { padding-bottom: 0; } } @media #{$medium-up} { .last-large { padding-bottom: 0; } }

html css css3 zurb-foundation