StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The simplest way to remove the padding/gutter between columns is to use the <code>collapse</code> class on the row. If you want more control, read on...</p> <p>There are a couple of additional options if you are using Sass/Compass, the <code>zurb-foundation</code> gem, or a customized download. For example, if you wanted the column spacing to be changed across the whole app, you could just set the <code>$column-gutter</code> variable. For a group of elements with fixed spacing like this, you may also want to consider the block grid.</p> <p>If you wanted to apply the customized gutter to only certain rows, you could define a new class, say <code>.feature-tiles</code> for the rows and customize the columns. For example:</p> <pre class="lang-css prettyprint-override"><code>@import 'foundation'; .feature-tiles { $row-width: em-calc(800); @include grid-row; .columns, .column { $column-gutter: 0; @include grid-column; } } </code></pre> <p>This example sets up a class you can use for the row (rather than <code>row</code>), sets the total row width, and removes the gutter between columns, appropriate for a snug tile layout. You would use <code>large-3 columns</code> for each tile, the same as before, to get four tiles in the row. The <code>em-calc</code> piece is just a helper that calculates the size in ems from the supplied pixel value, based on the base font size of the page. This helps maintain relative sizing across devices.</p> <p>The documentation page for the grid explains more: <a href="http://foundation.zurb.com/docs/components/grid.html" rel="nofollow">http://foundation.zurb.com/docs/components/grid.html</a></p> <p>In the example above, I would suggest that the images are more content than background, so <code>img</code> tags are probably appropriate. Here's an opinionated article that explains the options more: <a href="http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/" rel="nofollow">http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload