Alignment in stacks - how to centre correctly

Its me i know but i do some basic problems lining stuff up nicely
For instance this page - see pics.

Its a grid stack but i can’t centre it correctly on the page .
I use fill - set the stack inside a foundation column
I use flexible > centre and reduce the width no good.

Ive had the same with lining up images too but now i make them exactly the right size and if the images are to line up
I make them the same size in illustrator / photoshop.
Is this how you do it ?
Sizing images in Foundation is hard ( its probably me ) ( define max width )

So room 101 i know but it just bugs every time i work on stuff. this is the price list

You can center the PowerGrid with the following CSS

margin: 0 auto

This will affect all power grid stacks on the page. If you only want to affect one then you can put it in a CSSBox stack to give it a unique class which is a much nicer way than using the stacks ID. Let me know if you want more info on this.

Not sure what you mean here but, yes, in essence you just specify a max-width for each of the three viewport sizes. This way the image will never grow larger than this, but will stay nice and responsive and shrink where necessary.

Foundation is no different from anything else in this respect. What you may be missing is the Stacks image control resizing? You can use stacks images in Foundation if you want but it is much better to size your original first (and compress them) to the smallest size acceptable, thus reducing load times. The Foundation framework will then handle the loading of the appropriate image dependent on device size.

Thank u for that , centering is always a pain. Well it is if ,like me, doesn’t know any coding. It’s a bit like having one hand tied behind ones back I think. I have made up all sorts of devious ways to get around a lack if knowledge . I do now make all images to the required sizes outside of RW it saves a lot of time fiddling, which I seem to do most of the time.! Time to pay for some training I think

1 Like

thanks it worked perfectly

1 Like