css - neat grid truncated left and right -
css - neat grid truncated left and right -
i'm using neat 1.7 having problem aligning grid columns neat grid (grid gets truncated left , right) when using background image page @include background-image(url("../img/background.jpg"));
found solution.... problem next 2 line of code, best not utilize in top div tags... utilize in lower div tags .grid_head . grid_content , grid_footer
font-size: 13px; line-height: 157%
**_grid-settings.scss** // alter grid settings $column: 90px; $gutter: 30px; $grid-columns: 12; $max-width: em(1088); // define breakpoints $tablet: new-breakpoint(max-width 768px 8); $mobile: new-breakpoint(max-width 480px 4);
// _struct.scss file
.grid_back { @include background-image(url("../img/background.jpg")); color: #adadad; letter-spacing: 0px; min-width: 1020px; font-family: "lucida sans unicode", "lucida grande", sans-serif; font-size: 13px; // remove this... work line-height: 157%; // remove this... work } .grid_wrapper { @include outer-container; background-color: #aaf; @include fill-parent; @include media($mobile) { @include span-columns(4); } @include media($tablet) { @include span-columns(8); } } .grid_head { background-color: #aaf; @include fill-parent; @include media($mobile) { @include span-columns(4); } @include media($tablet) { @include span-columns(8); } } .grid_content { background-color: red; @include fill-parent; @include media($mobile) { @include span-columns(4); } @include media($tablet) { @include span-columns(8); } } .grid_footer { background-color: blue; @include fill-parent; @include media($mobile) { @include span-columns(4); } @include media($tablet) { @include span-columns(8); }
// html file...
<body> <div class="grid_back"> <div class="grid_wrapper"> <div class="grid_head"> <p>grid head</p> </div> <div class="grid_content"> <p>grid content</p> </div> <div class="grid_footer"> <p>footer</p> </div> </div> </div> </body>
css bourbon neat
Comments
Post a Comment