• Stacks Image 390419
  • Stacks Image 390403
  • Stacks Image 390407

SmartColumns2 Stacks

2, 3 or 4 equal height, fluid and/or fixed width responsive columns

The SmartColumns2 Stacks are a set of three stacks to make columns with an equal height that are responsive, so you can show them beneath each other below a given screen width. 100% JavaScript free, so fast loading.

They come in a two, three and four column version, and each column can be styled individually, including the vertical alignment. This makes these stacks really versatile, allowing to tailor the columns to your needs. Especially the Smart2Columns stack is also great for center and bottom aligned captions next to an image.

New in version 2:
  • optimized for Stacks 3
  • one or more columns can have a fixed width (in pixels)
  • fixed width columns can retain their width on small screens, and their alignment (left/right/center) can be set
  • the width of the gutter can be fixed (in pixels) or fluid (as a percentage)
  • the background image can now fill the background

Demos
Visit the demo page to see them in action. All demo pages are responsive, so don't forget to resize your window.
New in version 2.3.0: you can now set a custom ordering of the columns when they are shown below each other. See demo page #2 for examples.

New in version 2.4.0: you can now show columns side by side below, between or above a certain screen width. Besides that, columns can now be HTML5 basic elements (article, aside, etc.) and have custom classes.
This is especially useful when nesting SmartColumns Stacks, e.g. as an aside/sidebar. See demo page #3 for examples.
Usage
Just drag any content into the drop zone of the stack. In general settings, select how you want the width of the columns (equal width, different width, one or more fixed width) and if you want the width of the gutter (the space between the columns) fixed (in pixels) or fluid (as a percentage). When using the responsive setting, you can set the maximum screen width to show the columns below each other and the space between the stacks in that case.
The styling of each column (background color, background image, border color, border width, border style, border radius, vertical alignment) can be set individually.
See the image of the HUD for all settings.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).
Smart4Columns HUD
Do you like these stacks? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
© 2012-2018 Marathia Web Design | Contact