search

zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 216 forks source link

Recursive Grid Block Padding #775

Open nk2580 opened 8 years ago

nk2580 commented 8 years ago

Hello,

it appears as though the following compiled Style is inherited for all grid blocks within a grid content element

.grid-content .grid-block {
    margin-left: -1rem;
    margin-right: -1rem;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: visible;
}

the padding is applied recursively to all grid blocks regardless of their parent when the parent to their containing grid block is a grid container which causes the blocks subsequent width to be larger than the container and when applied recursively this makes the total width of contained grid blocks wider than the browser window.

this could be fixed by adding the following somewhere to the foundation SCSS files

.grid-block .grid-block {
    margin-left: 0;
    margin-right: 0;
}

does anyone know where to add this in to resolve the issue