Fix incorrect calculation of grid offsets, closes #200

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 260a9366f1a3a081eb85852024286c31a07e7ac0..819f4638949b55b727085fa0b7af0c2c941e53dc 100755 (executable)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -130,7 +130,7 @@ th.column {
   th.large-offset-#{$i}.first,
   th.large-offset-#{$i}.last {
     //1.5 takes in effect a whole empty cell.
-    padding-left: -zf-grid-calc-px($i, $grid-column-count, $container-width) + 1.5 * $grid-column-gutter;
+    padding-left: -zf-grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter * 2;
   }
 }
 

diff --git a/testing/src/pages/offset-inky.html b/testing/src/pages/offset-inky.html
index cdb40d21a13069dcc2b291f99a1010068e87d91e..9a09012cd3c54feba9d9db85542234a9ef0b189a 100644 (file)
--- a/testing/src/pages/offset-inky.html
+++ b/testing/src/pages/offset-inky.html
@@ -1,28 +1,39 @@
 <container>
   <row>
-    <columns small="8" large="8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    <columns>
+      <p>Offset columns should correctly align with the gutters of standard columns.</p>
     </columns>
-    <columns small="4" large="4">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+  </row>
+  <row>
+    <columns large="1">
+      <p>1 of 12</p>
+    </columns>
+    <columns large="11">
+      <p>11 of 12</p>
     </columns>
   </row>
   <row>
-    <columns small="4" large="4" class="small-offset-8 large-offset-8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit totam quasi ab aliquam saepe non fugiat laborum, veniam corporis alias impedit est nesciunt. Provident numquam cum libero vero minus fuga.</p>
+    <columns large="1" class="large-offset-1">
+      <p>Offset 1 of 12</p>
+    </columns>
+    <columns large="11">
+      <p>10 of 12</p>
     </columns>
   </row>
   <row>
-    <columns small="12" large="8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque itaque iste voluptatibus, aspernatur error nesciunt quia molestiae tempore ab iusto voluptatum libero natus animi ipsam dolores. Modi ut, deserunt nemo.</p>
+    <columns large="2">
+      <p>2 of 12</p>
     </columns>
-    <columns small="12" large="4">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus blanditiis, iure quo mollitia molestias, officiis, quia soluta repellat voluptas ratione architecto maxime? Dolores molestias numquam, recusandae nam inventore qui autem!</p>
+    <columns large="10">
+      <p>10 of 12</p>
     </columns>
   </row>
   <row>
-    <columns small="12" large="4" class="large-offset-8">
-      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit est asperiores id, commodi et debitis fuga sint aut in voluptatem, expedita dolor nam omnis dolorem animi. Dolores, officiis aperiam voluptate!</p>
+    <columns large="2" class="large-offset-2">
+      <p>Offset 2 of 12</p>
+    </columns>
+    <columns large="9">
+      <p>9 of 12</p>
     </columns>
   </row>
-</container>
\ No newline at end of file
+</container>