Example #1: wrapping around three sides

Floating elements don’t have to be on the top/left or top/right on big screens. If you want text on three sides, just use a Text stack above the SmartFloat stack and put both inside a 1 Column stack:

Red: a 1 Column stack
Yellow: a text element above the SmartFloat stack
Blue: the floating element of the SmartFloat stack.
Green: the wrapping element of the SmartFloat stack.

On screens wider than 768px, this text wraps around the element on the left.

On smaller screens, this text is shown below the floating element.

Some filler text to make the floating element bigger than the wrapping element: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Here’s a slick example using my SuperB&B stack instead of a 1 Column stack:

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Stacks Image 1313
On screens wider than 768px, this text wraps around the image on the left.

On smaller screens, this text is shown below the image.

Some filler text to make the floating element bigger than the wrapping element: Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Change the width of your browser window to see the responsive characteristics of the SmartFloat stack.
© 2015-2017 Marathia Web Design | Contact