Problems with aligning columns


(Martha Luehrmann) #1

I want a grid with some simple columns with text and images. I have tried using regular stacks and Foundation stacks. With regular stacks I sometimes get weird results where the images and text show up sometimes aligned and other times not even slightly aligned, but one on top of the other. With Foundation columns I get the above, plus, if I have three columns, it always puts the rightmost column item (when in edit mode) into the left column (in preview mode) and vice versa. It also seems to put one column on top of another as if it were always in iPhone mode. Help!


(scott williams) #2

So can you explain what stacks you are using inside what other stacks.
Are you putting column stacks inside the foundation grid stack? Sorry, I’m not clear on exactly what you are doing. Can you share a screen shot (edit mode) also showing the ui
Also what mode is your preview set to?
Oh and if you are using foundation columns, does the total of their sizes add up to 12?


(Martha Luehrmann) #3

I’m afraid I’ve tried everything. I first started with Foundation 3-columns structure, with another Foundation 3-column structure right under it, etc. When that didn’t work, I tried the regular stacks 3-column structure with another stacks 3-olumn structure right under it, etc. That didn’t work either. Then I tried Foundation grid, and asked it to be 3 columns wide. All I could get was one column, 1/3 the size of the page.
When I used Foundation columns the total of their sizes added up to 12.
I am in full-side Preview mode.
I will make you screen shot as soon as I can.


(scott williams) #4

Very strange. Are you certain that both your foundation stacks and the foundation theme are up to date? You can update stacks from within RW but you have to go to joe workman to download the theme.

Look forward to the screen shot.

So you want three columns by two rows?
Similar to the footer area here?


(Joe Workman) #5

Have you reviewed this… https://foundation.joeworkman.net/learn/the-grid/


(Martha Luehrmann) #6

Dear Joe, That was great, and it told me what the Foundation columns can do, but not how to do it. Help!


(Martha Luehrmann) #7

I’d like 3 columns by many rows.Here is a pic of the edit mode:

And here is a pic of the preview mode:


(Martha Luehrmann) #8

Here’s a better pic of the edit view:


(Jason Bostick) #9

What is your Preview Mode set at? It looks like it might be viewing at an iPhone width, in which case, the stacking of columns would be expected (in default settings). You can change it to stay at 3 columns per row in the column settings, but that may not look great given your content.

Also, the Edit View screenshot is showing the settings for the Stacks 2 Column, not Joe’s Foundation columns, so not sure if you have anything strange in the Foundation settings.

(My apologies if I’m misunderstanding your comment/issue).


(scott williams) #10

Can you show the settings for the 3 column foundation?
Also, just to be sure no problems use the 2 column foundation stack also.

One more question, You are using the foundation Theme Right?
Just curious about the menu on the left, Did you do that with Foundation?
Is this the only page giving you trouble?

I’ll check back in a while


(scott williams) #11

Okay,
So here is another idea. I made a simple 1 page foundation project. You can download it HERE

Open it up and see if it looks okay in preview.
Not Okay? —> Show me a FULL screen shot of the page and the preview

Okay? —> folow the steps below;
If it is okay, leave it open and open your project.
drag the page from my project to yours and have a look.
Still Ok? --> start replacing the elements on my page with the ones from yours (text and images) one at a time - preview each time. Maybe something is weird with one of your elements.

report back :slight_smile:


(Joe Workman) #12

It sounds like you may want Block Grid. Not the 3 Column stack. Give it a go.


(scott williams) #13

fyi, I gave her both in the sample project –