Foundation image stack float right

(Rico IJntema) #1

I’m building a website with a lot of articles with Foundation from Joe Workman. The articles have images that need to have text wrapping. I know I can do that in a paragraph stack and drop in an image and set the alignment. I also know that paragraph Pro does well with images and text wrapping.

For quick load-times on all platforms I want to use the foundation image stack, so the website has optimized images for mobile, tablet and desktop.

When I drop a Foundation image stack and a Foundation paragraph stack in a Foundation 1 column stack and in the image settings select in Layout -> Fill mode -> Float. The image aligns to the left and the text wraps around the image. But how can I get the image to align to the right?

It doesn’t matter if I set the Image to align to the center or the right, it stays on the left (settings in Image stack: Sizing & Alignment -> Align.)

Can anybody help?

(Robert Ziebol 🖖🏼) #2

Why not use the Float stacks that come with the Stacks Plugin?? The first one called Float allows you to drop in any stack.


Here it is with the Foundation Image stack in it:

(Rico IJntema) #3

Thanks, that works! Didn’t know that I could use that together with the image stack.

(Rico IJntema) #4

Hi Robert,

Almost perfect the floating stack… On a mobile screen the image doesn’t get full screen, so you end up with a tiny image on mobile. In a 2 column stack with an image in one column and text in the other on smaller screens the column collapses to a 1 column with a fullscreen image and fullscreen text.
Do you or anybody else know a way around this with the floating stack or with the foundation stacks?

(Rob Beattie) #5

You could try downloading this. Might help you out.