CODEWITHSUNDEEP
htmlcsszurb-foundation
travis heaver
travis heaver

Reputation: 121

Zurb Foundation: Changing padding between columns

New to HTML/CSS coding, but have liked working with the Foundation front end so far. Have a small problem: how do I change the padding between column elements within a row?

The page in question can be found at:

www.myfootprintcalculator.com

The code for one of the rows is this:

<!--fourthrow><!-->

<div class="row">

<div class="large-3 columns" style="text-align: center;">
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div>

</div>

Can someone point out a straight forward way to make the padding between the columns of tiles the same as the padding between the rows? The CSS file for Foundation is very large and a bit intimidating for a newcomer.

Upvotes: 1

Views: 7713

Answers (2)

botimer
botimer

Reputation: 641

The simplest way to remove the padding/gutter between columns is to use the collapse class on the row. If you want more control, read on...

There are a couple of additional options if you are using Sass/Compass, the zurb-foundation 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 $column-gutter variable. For a group of elements with fixed spacing like this, you may also want to consider the block grid.

If you wanted to apply the customized gutter to only certain rows, you could define a new class, say .feature-tiles for the rows and customize the columns. For example:

@import 'foundation';

.feature-tiles {
  $row-width: em-calc(800);
  @include grid-row;

  .columns, .column {
    $column-gutter: 0;
    @include grid-column;
  }
}

This example sets up a class you can use for the row (rather than row), sets the total row width, and removes the gutter between columns, appropriate for a snug tile layout. You would use large-3 columns for each tile, the same as before, to get four tiles in the row. The em-calc 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.

The documentation page for the grid explains more: http://foundation.zurb.com/docs/components/grid.html

In the example above, I would suggest that the images are more content than background, so img tags are probably appropriate. Here's an opinionated article that explains the options more: http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

Upvotes: 4

Joe
Joe

Reputation: 299

Also keep in mind that you are still able to use background images in the CSS, and there is no need to ever worry about the default Zurb CSS file.

Just make a CSS file and save it to the CSS file folder and name it app.css and save it. Now if you make any of your own rules you can save them here.

So for example you could make the rule "main-box" with a numerical value, and save it to your css file.Then you could apply a backgound image to it. So the HTML would look like this:

<div class="row">

<div class="main-box large-3 columns" style="text-align: center;">
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div>

<div class="main-box2 large-3 columns" style="text-align: center;">
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div>

<div class="main-box3 large-3 columns" style="text-align: center;">
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div>

<div class="main-box4 large-3 columns" style="text-align: center;">
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div>

</div>

Then simply give it a CSS rule with a background image in app.css like this: 

.main-box,.main-box2,.main-box3,.main-box4 {background-image: url(path to your image file here);}

Or if you need to have separate background images separate your rules like:

.main-box{background-image:url();}
.main-box2{}
.main-box3{}
.main-box4{}

and so on...

I should note that this is just one way of doing it. There are times in responsive design where it really pays to enter the image in html. Using background images is just one way to override the default container padding.

One other side note....if you enter one of the default CSS rules from Zurbs CSS files into app.css; then it will be overridden. So you can change even default CSS values without messing with the original file.

Upvotes: 1

Related Questions