Menu icon Foundation
Columns white spacing not desired

Hello guys,
i'm starting to re-write my site with foundation framework but i have somes problems with spacing in table columns...

I create a DIV with 4 columns.
My problem is i have a NOT DESIDER SPACE between the columns as in image attached... i would to limit this space near zero but not equal to zero....

How can i solve this ??

<div class="row">
    		<div class="small-2 columns">
				<div class="panel costole">Guide e Tutorial</div>
				<div class="panel">prova
						<br><br>
						link1
						<br>
						link2
						<hr>
						link3
				</div>	
			</div>
			
			<div class="small-5 columns">
				<div class="panel testate radius">.Articoli</div>
					<div id="ElencoArticoli"><a href="#">articoli elenco</a>
						<br><br>
						link1
						<br>
						link2
						<hr>
						link3
					</div>	
			</div>
			
			<div class="small-3 columns">
				<div class="panel testate radius">.Dalla Redazione</div>
			</div>
			
			<div class="small-2 columns">
				<div class="panel costole">Cerca nel sito</div>
					<div class="panel">prova
						<br><br>
						link1
						<br>
						link2
						<hr>
						link3
					</div>	
			</div>
		
		</div>
            

         

Spaziatura

spacingpaddingcolumns

Hello guys,
i'm starting to re-write my site with foundation framework but i have somes problems with spacing in table columns...

I create a DIV with 4 columns.
My problem is i have a NOT DESIDER SPACE between the columns as in image attached... i would to limit this space near zero but not equal to zero....

How can i solve this ??

<div class="row">
    		<div class="small-2 columns">
				<div class="panel costole">Guide e Tutorial</div>
				<div class="panel">prova
						<br><br>
						link1
						<br>
						link2
						<hr>
						link3
				</div>	
			</div>
			
			<div class="small-5 columns">
				<div class="panel testate radius">.Articoli</div>
					<div id="ElencoArticoli"><a href="#">articoli elenco</a>
						<br><br>
						link1
						<br>
						link2
						<hr>
						link3
					</div>	
			</div>
			
			<div class="small-3 columns">
				<div class="panel testate radius">.Dalla Redazione</div>
			</div>
			
			<div class="small-2 columns">
				<div class="panel costole">Cerca nel sito</div>
					<div class="panel">prova
						<br><br>
						link1
						<br>
						link2
						<hr>
						link3
					</div>	
			</div>
		
		</div>
            

         

Spaziatura

This post has been closed. No new replies can be added.

Amanda Healey over 3 years ago

Check out the collapse/uncollapse section of the documentation about halfway down this page: http://foundation.zurb.com/docs/components/grid.html

Stefano Ravagni over 3 years ago

Just used collapse method, but this way erase totally the space....i would have a very little space again, but not so hight space.... it's possible ?

Rafi Benkual over 3 years ago

As Amanda pointed out, the .collapse class removes the columns padding. You can change the column padding to anything you want.

For example:

.columns {
  padding: 0.5rem;
}

or in SCSS _settings.scss file -

// $row-width: rem-calc(1000);
// $total-columns: 12;
 $column-gutter: rem-calc(15);

Stefano Ravagni over 3 years ago

Thanks for answer...

I set the collapse tag and it remove the space between columns...

But i don't find were to change the padding value...

I found many values of columns padding as this

.column,
.columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
width: 100%;
float: left; }

i changed all to

.column,
.columns {
padding-left: 0.2375rem;
padding-right: 0.2375rem;
width: 100%;
float: left; }

in every point but nothing change...i have not the little spacing i need...

Stefano Ravagni over 3 years ago

Ok..i solved the problem changing padding-left and right for all media screen visualization.

Thanks guys