Menu
i have posted a question on ZURB's forum, but i noticed there were no answers to any post. As i think this problem might occur to many others, i think it might be a good idea to put it on SO as well. Here it comes:
i have crafted a minimal example of the problem using the following markup (Edited with CLCS advices):
<body>
<div class="row collapse test">
<div class="large-4 columns">
<p>Test 1</p>
</div>
<div class="large-4 columns">
<p>Test 2</p>
</div>
<div class="large-4 columns">
<p>Test 3</p>
</div>
</div>
</body>
All CSS classes are ZURB Foundation untouched classes. The only addition is for the test-table class, which sole purpose is only to get visual aid on the problem (Edited as well for clarity sake):
.test div {
border: 1px solid red;
}
The expected output would be 3 columns perfectly touching each other. The actual output is two columns touching each other like expected, but the third one being offset a bit on the right, leaving a white space between the center and the right one (See attached image, edited as well, but issue still present).
Seems that some other users are facing the same problem under the same environment (Safari 7, Zurb Rails Gem 5.0.2.0)
955
It is a combination of rounding issue that others have pointed out above and the fact that Foundation put float: right; on the last column in the row. That is why you are seeing the gap between the last column and the middle column.
To remove the gap, you can add the end class to every column.
Have a look at Foundation's docs under "Incomplete Rows" http://foundation.zurb.com/docs/components/grid.html#incomplete-rows
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
