Menu icon Foundation
Automatic items bad display

Hi,

I have an issue with my website. I have redone it with Zurb Foundation a couple months ago now and noticed an issue.
I have an automatic list of elements. By automatic I mean, it's generated automatically using PHP (the core of the project is very old).
The layout is about 3 items per line but when I have 4 items to display, the last one goes to a new line (normal behavior) but straight to the right. Of course, I would prefer it to the left (see source code + image).
If I have only 2 items to display, the first one is on the left, the second on the right with an empty space in between.

What could I do ? Thanks for your precious help.

Best,

<section class="main-section section-grey">
    <div class="row">
        <h2 class="large-12 columns">L'Ange de la Nuit sur Anamor (Serie terminee)</h2>
        <div class="list-articles-small">
            <div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-0-l-ombre-parfaite.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-0-l-ombre-parfaite.png" alt="L'Ange de la Nuit 0, L'Ombre Parfaite" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 0, L'Ombre Parfaite</p>
                    	</div>
                    </a>
                </div>
            </div><div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-1-la-voie-des-ombres.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-1-la-voie-des-ombres.png" alt="L'Ange de la Nuit 1, La Voie des Ombres" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 1, La Voie des Ombres</p>
                    	</div>
                    </a>
                </div>
            </div><div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-2-le-choix-des-ombres.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-2-le-choix-des-ombres.png" alt="L'Ange de la Nuit 2, Le Choix des Ombres" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 2, Le Choix des Ombres</p>
                    	</div>
                    </a>
                </div>
            </div><div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-3-au-dela-des-ombres.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-3-au-dela-des-ombres.png" alt="L'Ange de la Nuit 3, Au-delà des Ombres" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 3, Au-delà des Ombres</p>
                    	</div>
                    </a>
                </div>
            </div>        </div>
    </div>
</section>
            

         

Foundation forum

PHP

Hi,

I have an issue with my website. I have redone it with Zurb Foundation a couple months ago now and noticed an issue.
I have an automatic list of elements. By automatic I mean, it's generated automatically using PHP (the core of the project is very old).
The layout is about 3 items per line but when I have 4 items to display, the last one goes to a new line (normal behavior) but straight to the right. Of course, I would prefer it to the left (see source code + image).
If I have only 2 items to display, the first one is on the left, the second on the right with an empty space in between.

What could I do ? Thanks for your precious help.

Best,

<section class="main-section section-grey">
    <div class="row">
        <h2 class="large-12 columns">L'Ange de la Nuit sur Anamor (Serie terminee)</h2>
        <div class="list-articles-small">
            <div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-0-l-ombre-parfaite.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-0-l-ombre-parfaite.png" alt="L'Ange de la Nuit 0, L'Ombre Parfaite" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 0, L'Ombre Parfaite</p>
                    	</div>
                    </a>
                </div>
            </div><div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-1-la-voie-des-ombres.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-1-la-voie-des-ombres.png" alt="L'Ange de la Nuit 1, La Voie des Ombres" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 1, La Voie des Ombres</p>
                    	</div>
                    </a>
                </div>
            </div><div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-2-le-choix-des-ombres.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-2-le-choix-des-ombres.png" alt="L'Ange de la Nuit 2, Le Choix des Ombres" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 2, Le Choix des Ombres</p>
                    	</div>
                    </a>
                </div>
            </div><div class="large-4 medium-4 small-12 columns">
                <div class="article-item">
                	<a href="/oeuvres/l-ange-de-la-nuit-3-au-dela-des-ombres.html">
                    	<div class="row">
	                        <p class="large-2 medium-3 small-2 columns"><img src="/img/livres/l-ange-de-la-nuit-3-au-dela-des-ombres.png" alt="L'Ange de la Nuit 3, Au-delà des Ombres" class="image-50" /></p>
	                        <p class="large-10 medium-9 small-10 columns">L'Ange de la Nuit 3, Au-delà des Ombres</p>
                    	</div>
                    </a>
                </div>
            </div>        </div>
    </div>
</section>
            

         

Foundation forum

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

Bob Sawyer over 4 years ago

You have a container with a class of "large-12" containing 4 divs with the class "large-4" ... 4 x 4 = 16. If you set the class of the 4 divs to "large-3 medium-3 small-12" (and really, you don't need the "large-3" if you set "medium-3"), then they will float correctly (4 x 3 = 12).

<div class="list-articles-small">
     <div class="medium-3 small-12 columns">
     <div class="medium-3 small-12 columns">
     <div class="medium-3 small-12 columns">
     <div class="medium-3 small-12 columns">
</div>

Bob Sawyer over 4 years ago

If you have fewer than 4 items, the last item in the row needs to contain the class "end":

<div class="row">
     <div class="medium-3 columns">3</div>
     <div class="medium-3 columns">3</div>
     <div class="medium-3 columns end">3 end</div>
</div>

http://foundation.zurb.com/docs/components/grid.html

Nicolas Lemoine over 4 years ago

Hi, yes that's the end tag. I did a PHP code to add the tag to the last div if the total number of div is 2, 4 or 5.
Perfect, thanks Bob.