How to get text render columns horizontally in foundation CSS?

Question

In Foundation CSS (v6), I am trying to get three columns of text (with images also), side by side....e.g:

Block 1 | Block2 | Block3

What I get in Chrome browser readers as:

Block1

block2

block3

I am assuming that Foundation CSS takes care of this and I do not need to write my own CSS code - as that is what the documentation suggests.

I have read and tried just about every code example and nothing changes - the columns are rendered vertically not side by side.

E.G. you can see from this site what I am trying to achieve: https://foundation.zurb.com/sites/docs/v/5.5.3/components/equalizer.html

...and yes, I have tried using foundation.equalizer.js as it describes and I still get the same result.

When I was using the Skeleton framework I never had an issue getting columns rendered properly.

Any help at all would be much appreciated as this is consuming huge amounts of time to get nowhere.

I'm really hoping it's user error :-) and something fundamental that I have missed.

Answer 1

Make sure you include the foundation.css some way. There are many ways to achieve that. Such an import is usually visible in the head of the page.

On easy way to do that is to add the following code in the head section of your page:

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet">

you should also include the Javascript package as well:

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>

Finally, make sure you call the $(document).foundation (assuming you have jQuery installed) at the end of your document.

If you use the latest grid technology (XY-Grid), class names have been revamped. row is replaced by grid-x, columns by cell etc. Make sure you pick the right grid system.