Marathia’s Stacks

RapidWeaver stacks for the rest of us

RapidWeaver stacks for the rest of us

  • Stacks Image 91444
  • Stacks Image 91448
  • Stacks Image 91452

SmartColumns2 Stacks demo #2: bottom aligned captions

demo #1 | demo #2 | demo #3 | demo #4a | demo #4b | demo 4c | back to product page
The Smart2Columns2 and Smart4Columns2 stack are also great for center and bottom aligned captions next to an image.

Two tips when using images while setting the stack to responsive :
Due to rounding differences by the browser, an image with a border sometimes shows a small line (usually at the bottom) at certain screen widths. Setting the background color of the image to the same value as the border will solve this.
If necessary, use the option full width images to scale images proportionally and use the full width of the column
The examples on this page are responsive, but the columns will only be shown below each other on screens with a width below 480px. In case you're on a bigger screen, resize your window to see the effect.
Stacks Image 91407
An image in the left column of the Smart2columns2 stack, and the caption in the right – aligned to the middle of the image.

An image in the right column of the Smart2columns2 stack, the caption in the left – aligned to the bottom of the image.

Stacks Image 91418

In the two column example above, the first column is set to a width of 23%, the gutter to 2%, so the right column is 75%*

* (100-(23+2)=75

Stacks Image 91425
this is the second column of the Smart4columns2 stack
Stacks Image 91431
this is the fourth column of the Smart4columns2 stack

In the four column example above, the first and the third column are set to a width of 30%, the second column to 17% and the gutter to 2%, so the right column is also 17%*

* (100-(30+2+17+2+30+2))=17

Yes, this website uses cookies too. Here’s the annoying but obligatory cookie warning. More info…