How to align stacks?


(andrea) #1

Hi i’d like to know how to align left or right stacks text and images.
I want to align this image to the left page on top the text… there is a plugin or stack to buy?!

Help me please

Thank you.


(scott williams) #2

one way without an additional purchase would be to add another multi column or grid stack in the left column of your 2 column stack and then put the photo stack in the left column of that one.


(Steve Reel) #3

Under “Layout”> change “Fill Mode” to fixed size. Make Pixel width the same dimensions as the actual image.
Set “Align” to left. This will work but the image won’t be responsive. The image will remain the same size on all screen sizes and devices.

To make the image responsive
Set Fill Mode to Flexible.
Adjust the “flexible width” so that the image aligns left at the desktop size in preview. (16% is not a magic number, you have to see what works for your image size.)You need to check it on a screen that is wider than the max width of your theme.


(andrea) #4

Ok the first way u suggested works fine with the icon image but for the button
its not works why?
If i select just fixed and align to the left : the button goes just a little to the left but not align with text;
if i select flexible and align to the left : the button goes right to the left but… half disappear !!!

is there a way to drag and/or align stacks exactly where i want in layout?! Something like a fine selection… you know what i mean?


(Steve Reel) #5

Most of the time you will leave “Fill Mode” as “fill”.

In “flexible” and “fixed” mode, you are changing the size of the invisible container that the button or image is going into. The stacks image stack doesn’t have any alignment controls and is always in the center of the container. We made the container just big enough to contain the image, and aligned the container to the left.

The stacks button stack has its own alignment controls. You would leave it in “fill” mode, and use its alignment controls. It doesn’t go all of the way to the left because it has either margin or padding built in to the stack.

When you change “fill mode” to fixed or flexible, you change the size of the invisible container. If you make the space smaller than the button, part of the button disapears. The same thing will happen to the image if you make the space too small.

Instead use the donation-ware button plus stack from Big White Duck. It will align just the way you want it.


(andrea) #6

I’ve download it but there is no way to set color button e no way to set properly on the left … could u help me please?


(andrea) #7

maybe works just with Foundation?! i have no this theme…


(Rob Beattie) #8

ButtonPlus is Foundation only, I’m afraid.


(Steve Reel) #9

Yes, my mistake. Some of the BWD stacks work with or without foundation. I haven’t used any themes except foundation for quite a while, maybe someone else can suggest another button stack that will work, or some css to get rid of the margin on the stacks button.


(David Jenner) #10

#andreacreative you might want to try Gary’s Align Stack from Doobox…
https://www.doobox.co.uk/stacks_store/demos/align.html


(andrea) #11

I will try it thank you so much it seems to be ok


(Dominick Designs Websites & Tech Training Seminars LLC) #12

Wouldn’t Joe Worman’s Match Height help solve this issue as well?