Menu icon Foundation
Wordpress column layout help

Hey everybody! Bob emailed us a question regarding layout with wordpress. Let's help him out!

Hi, I'm working with Wordpress and Jeremy Englert's Jointswp theme that incorporates Foundation 5. I'm trying to do a simple two column layout but the columns shift under each other when the viewpoint goes beyond the width of the grid.

My intention is to have the two divs below line up next to each other in columns.

I'm sure there's something basic I'm missing, but I just can't seem to make it work.

Here's the code and a screenshot of the results I put borders around the divs for visualization:

Help would be much appreciated.

<section id="fp-section-2" class="fp show-for-small-only">
        <div class="row clearfix">
                <div class="small-12 columns"><img id="image-section-2" src="#jpg"/>
 
                </div>
        </div>
        <div class="row clearfix">
                <divclass="small-12 columns"><p>...</p>
                </div>
        </div>
</section><!--/small only-->
<section id="fp-section-2" class="fp show-for-medium-up">
 
        <div class="row clearfix">
                <div class="medium-5 large-5 columns"><img id="image-section-2" src="#"/>
                </div>
                <div class="medium-7 large-7 columns"><p>...</p>
                </div>
        </div><!--/medium and up-->
</section>
            

         

Imagedisplayzsupport

columnslayoutwordpressclearfix

Hey everybody! Bob emailed us a question regarding layout with wordpress. Let's help him out!

Hi, I'm working with Wordpress and Jeremy Englert's Jointswp theme that incorporates Foundation 5. I'm trying to do a simple two column layout but the columns shift under each other when the viewpoint goes beyond the width of the grid.

My intention is to have the two divs below line up next to each other in columns.

I'm sure there's something basic I'm missing, but I just can't seem to make it work.

Here's the code and a screenshot of the results I put borders around the divs for visualization:

Help would be much appreciated.

<section id="fp-section-2" class="fp show-for-small-only">
        <div class="row clearfix">
                <div class="small-12 columns"><img id="image-section-2" src="#jpg"/>
 
                </div>
        </div>
        <div class="row clearfix">
                <divclass="small-12 columns"><p>...</p>
                </div>
        </div>
</section><!--/small only-->
<section id="fp-section-2" class="fp show-for-medium-up">
 
        <div class="row clearfix">
                <div class="medium-5 large-5 columns"><img id="image-section-2" src="#"/>
                </div>
                <div class="medium-7 large-7 columns"><p>...</p>
                </div>
        </div><!--/medium and up-->
</section>
            

         

Imagedisplayzsupport
Steve Trask almost 6 years ago

Hi Bob,

I think what you want is them side by side right and then each full width for mobile (small)?

If so I think there are a amend we need to make please see changed code below:

<divclass="small-12 columns"><p>...</p>

needs a space so:

<div class="small-12 columns"><p>...</p>

Just a thought and there might be a reason to split it into two but why not use:

<section id="fp-section-2" class="fp">

        <div class="row clearfix">
                <div class="medium-5 large-5 columns"><img id="image-section-2" src="#"/>
                </div>
                <div class="medium-7 large-7 columns"><p>...</p>
                </div>
        </div>
</section>

As the small will default to 12 col width unless specified (this is untested as I have not used F5 med grid only my own added to F4)

Let me know how you get on

Thanks

Steve

Thomas E. Vasquez over 5 years ago

Hey Bob,

I would def go with the block grid system:

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

all you need to do is add this:

<ul class="small-block-grid-2">
  <li><img id="image-section-2" src="#jpg"/></li>
  <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque justo purus, blandit in placerat at, molestie nec mauris. Ut porta enim felis, vel tincidunt quam molestie sed. Donec ut interdum tortor, sit amet posuere tellus. Donec condimentum vestibulum erat, ut vulputate urna tincidunt dapibus. Sed bibendum massa dui, egestas pellentesque nibh elementum sit amet. Nulla lobortis sapien id tempor laoreet. Maecenas urna nunc, dignissim non felis quis, malesuada interdum mauris. Curabitur risus est, mollis at vestibulum sollicitudin, interdum nec neque. Mauris dapibus enim consequat, elementum augue accumsan, vulputate mauris. Ut fermentum a turpis eget interdum. Praesent non nisl sit amet nibh placerat suscipit. Pellentesque vitae urna eleifend, placerat sem at, porttitor est. Nam sit amet quam vel erat rutrum dictum. Donec molestie laoreet neque, quis facilisis nunc rhoncus accumsan. Donec et rhoncus metus, non auctor ligula. Suspendisse scelerisque fringilla erat sed pellentesque</p></li>
</ul> 

I believe this will make you content show side by side.