Having trouble figuring out how to use columns in Foundation… (Is there a BOOK anywhere on Foundation?)
Have a 1 column F Stack set to FullWidth and filled with black.
Inside that I have a 2-column F Stack set to Site Width and filled with black.
a. I want Column 1 (header + paragraph) to be left aligned in its column.
b. I want Column 2 (image) to be right aligned in its column.
c. The image is small so I’ve set columns:
Col 1:11
Col 2:1
I’ve set left margin to 200 but cannot get image to the extreme right!
On my MacPro Laptop, with Inspector open, looks like this in Full-Width Preview.
If using the 1-column stack only as a container for the 2-column stack, I recommend its removal. As described, it’s without a purpose.
Your browser is an infinite width (as wide as your monitor will allow). Your site is a fixed width, be that 900, 1000, 1100 pixels, or other. Columns keep content inside the site width. When you resize your browser so that it exceeds the site width, you will always have black on the outside of your content. I don’t recommend putting that image outside of a column though. If someone looks at your site on a 5K iMac, then your picture will be several thousand pixels away from the right-most edge of your site.
The second thing at play is the gutter. When you place anything in a column, there’s some margin. This is because you don’t want content at the physical edge of your browser. It looks bad.
If you want your picture to touch the browser edge/the full site width, you can put the image in a 2-column stack. Then, in the column settings, under Row Setup, set Gutter to Never. In the left of 2 columns, place a 1-column stack. Put your text in that. It’ll provide the gutter for your text. Next without a gutter should be avoided.
The extra 1-Col is set to max-width to provide a black background for my site, outside of the site width,
Thanks for the info about the divider, but I’m still not understanding how to use it. I’ve tried it in both columns of the 2-Col stack with same results. More help, please!
AC, I guess I am supposed to be using the GRID stack to follow your instructions? Sorry if I missed that…and I HAVE now watched the video and will be giving it a try!
