Menu icon Foundation
Unwanted column-sized space before a column

Capture d e cran 2015 12 03 a  11.21.48

My problem is that I don't know where that space is coming from. (the capture is from a medium screen)
It does the same on a large screen, but the column ACTIVITES is on the second row and it's on the right side, SPA is on the first row. The problem seems to disappear on small screens.
Here is the HTML :

<div id="nosservices" class="row textaligncenter">
    	<h2>Nos services</h2>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Petit déjeuner</h3>
			<p>Le petit déjeuner est servi autour de la piscine sous forme de buffet de 8h à 10h30.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Transats &amp; parasols</h3>
			<p>Les transats et parasols sont offerts sur notre plage partenaire : Le WAIKIKI.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>WiFi</h3>
			<p>Le Wifi haut débit est gratuit partout dans l’enceinte de l’hôtel.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Spa</h3>
			<p>L’accès au SPA est sur la plage.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Activités</h3>
			<p>Un service de réservation d’activités est disponible.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Baby-sitting</h3>
			<p>Vos enfants peuvent être gardés par nos babysitters.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Lingerie</h3>
			<p>La lingerie est à votre disposition.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns end">
			<div class="iconconteneur">
				<img src="image">
			</div>
			<h3>Serviettes de plages</h3>
			<p>Les Serviettes de plages sont fournies et changées tous les jours.</p>
		</div>
	</div>
            

         

Please help !
Thank you

FoundationfoundationPresswordpresscolumnsspace

Capture d e cran 2015 12 03 a  11.21.48

My problem is that I don't know where that space is coming from. (the capture is from a medium screen)
It does the same on a large screen, but the column ACTIVITES is on the second row and it's on the right side, SPA is on the first row. The problem seems to disappear on small screens.
Here is the HTML :

<div id="nosservices" class="row textaligncenter">
    	<h2>Nos services</h2>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Petit déjeuner</h3>
			<p>Le petit déjeuner est servi autour de la piscine sous forme de buffet de 8h à 10h30.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Transats &amp; parasols</h3>
			<p>Les transats et parasols sont offerts sur notre plage partenaire : Le WAIKIKI.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>WiFi</h3>
			<p>Le Wifi haut débit est gratuit partout dans l’enceinte de l’hôtel.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Spa</h3>
			<p>L’accès au SPA est sur la plage.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Activités</h3>
			<p>Un service de réservation d’activités est disponible.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Baby-sitting</h3>
			<p>Vos enfants peuvent être gardés par nos babysitters.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns">
			<div class="iconconteneur">
    			<img src="image">
			</div>
			<h3>Lingerie</h3>
			<p>La lingerie est à votre disposition.</p>
		</div>
		
		<div class="small-6 medium-4 large-3 columns end">
			<div class="iconconteneur">
				<img src="image">
			</div>
			<h3>Serviettes de plages</h3>
			<p>Les Serviettes de plages sont fournies et changées tous les jours.</p>
		</div>
	</div>
            

         

Please help !
Thank you

Marine Le Borgne over 3 years ago

Found a solution. Apparently, it was the height of the fourth column that was too small, so i added a min-height to all the columns and it worked like a charm