Fill mode and align

All my websites are responsive (and have always been since I discovered what used to be known as liquid layout. ) So whenever I add a stack, I select fill mode ‘flexible’ and align ’ left’, and 100% flexible width.

I’d be interested to know whether with a responsive theme I need to do what I do, also what are the various fill modes for and under what circumstances would each be used.

Thank you

The jury is still out on whether “fluid” layout qualifies as “responsive”. It is responding to the size of the device – but the layout doesn’t behave differently from device to device.

In general when people say “responsive” they mean that the layout of site is substantially different on different types of devices.

In Stacks 3 there are a few responsive options built in – and many options available in 3rd party stacks.

The built-in responsive options are to allow for hiding a specific stack on a specifically-sized platform and (for some column stacks) their stacking behavior.

The Layout-Fill Mode options aren’t specifically responsive. And some of the settings will be difficult to use in a responsive site, but can still be used if you also combine them with stack-hiding.

  • Fill
    This mode fills the entire width of the container. If that’s the page, then the stack will be 100% the width of the page. This is the default and the most common thing you’ll use on a responsive site since you’ll probably want the stack to fill whatever sized device you’re using.

  • Flexible
    Flexible is just like fill – but you get to choose how much of the space to fill. If you set the width to 50% – it will fill up half the available space. This can also be used for responsive – but care must be taken to make sure that the width is still sufficient on mobile.

  • Fixed
    Fixed will make a specifically sized stack. This is NOT responsive at all. So if you use this on a responsive site, you’ll also want to make sure that this stack is only visible on the platforms where it makes sense. For example: Include a fixed-size stack at 1000px – but keep it hidden on tablet and mobile. Then provide a second stack that’s just 300px wide for that’s hidden on desktop. That’s a good way to do both fixed-size and responsive. Neat!

  • Float
    Float is the last option and the least commonly used. It provides a fixed width and then “floats” the div in the container. My instructions for this are: when you need this, you’ll know why – if you don’t know why, then you don’t need this. :wink:
    It’s a feature there for helping out 3rd party stacks and for pro users that are looking to mimic certain hand-created HTML layouts that require the float behavior.

Hope that helps,
Isaiah

4 Likes

Very interesting/helpful, thank you.