Updated SASS code snippet in README.md

I updated the SASS code snippet in README.md to more directly reference the gridstack item, and avoid problems where the widths of the gridstack items, are still set by gridstack.css and not this code. See issue gridstack#868 (gridstack#868) for an example.
StefanM98 · May 1, 2018 · ee5b601 · ee5b601
1 parent d6590d6
commit ee5b601
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -216,18 +216,18 @@ For 4-column grid it should be:
 
 and so on.
 
-Here is a SASS code snipped which can make life easier (Thanks to @ascendantofrain, [#81](https://github.com/gridstack/gridstack.js/issues/81)):
+Here is a SASS code snippet which can make life easier (Thanks to @ascendantofrain, [#81](https://github.com/gridstack/gridstack.js/issues/81) and @StefanM98, [#868](https://github.com/gridstack/gridstack.js/issues/868)):
 
 ```sass
-.grid-stack-item {
+.grid-stack > .grid-stack-item {
 
     $gridstack-columns: 12;
 
     @for $i from 1 through $gridstack-columns {
         &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
         &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
+        &.grid-stack > .grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
+        &.grid-stack > .grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
     }
 }
 ```