A general layout question


(Adam) #1

Coming from the obviously more WYSIWYG environment of iWeb I’m loving RW but often running into the general issue of laying out images and getting them to land more or less where I want them to. Let’s say for example I want to have 4 images going across my page horizontally. I have a 4 column Foundation stack and an image in each column. What are the settings I need to be adjusting if, for example, I want to tighten up the space between each image? Or, is the fact that RW is responsive as opposed to iWeb mean that I have to live with the fact that everything exists in a sort of liquid state of movability and flux? It is column size, padding, responsive padding, equalizing? I’m mostly hunting and pecking when all I really want to be able to do is move the images closer together or further apart without resizing them.

Sorry if this is obvious and I’m just being dense. Thanks.


(Jeremy Bohn) #2

I’m not familiar with Foundation, but in a normal column stack I would decrease the gutter width. To move them even closer together I would then add some margin or padding evenly to the left and right sides of the column stack.


(Adam) #3

Thanks Jeremy. Duh! The gutter is exactly what I was looking for - but I don’t see it in the Foundation stack and I guess since I got Foundation I’ve been just using its Column Stacks.

Surely the Foundation Columns have something that allows for the adjustment of the gutter. No?


(Robert Ziebol 🖖🏼) #4

Yup, there is a gutter setting in the stack. It is here:


(Adam) #5

Thanks Robert,

But unlike with the base Column Stack I don’t see any adjustments other than Full Width, Site Width or Custom Max Width. None of which seems to do what I want which is to tighten up the spacing between the images without resizing them down.

The regular Column Stack has this:


(Robert Ziebol 🖖🏼) #6

It is there for me. Be sure you have the latest version of Foundation.


(Adam) #7

Thanks Robert. But yes, I do have the latest versions. My problem (and I’m sure it’s my own stupidity) is that I don’t see the functionality that I’m looking for. Namely pulling the images closer together without sizing them down. Are you saying that the Foundation Column will do the same thing? How? By adjusting which parameters? The Row and Column Padding only seems to affect Top and Bottom - I’m basically trying to change the amount of vertical space between columns. Is that an option?


(Robert Ziebol 🖖🏼) #8

Ah, my mistake, I thought you wanted the images to be touching, you want to make the space smaller. That is in the Site Styles stack, see here:

The Column Gutter setting. You can see this preview that it works great.


(Adam) #9

Thanks! That’s it. I always forget about Site Styles and how powerful it is.

Not sure that this is a great use of it - since I don’t think this particular function screams out to be site wide. But I’m glad to have learned this lesson. I appreciate your help.


(scott williams) #10

If you don’t want site wide, try block grid foundation stack in a one column.