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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -