Responsive Float? (Learning responsive layout)

Classic General
1

I recently updated to a Responsive theme and now I’m working on changing individual pages using responsive stacks. I’m largely using AdaptiveGrid and UsefulStack (stacks4stacks) and I’m learning a lot and obtaining good results across all screen sizes.

Question: Is there such a thing as a “Responsive float?” I’m using the “float” stack with a photo on the left. On phones, I’d like the photo to break above the text. As it is now (on phones) the photo is reduced to about 25% width with the text at 75%.

I find several responsive stacks but they are “column” in nature and the text does not flow around the image as a “float” does…

If I want to keep the “float” concept that breaks over and under must I create separate stacks for the phone and display appropriate stack based on device (screen size)? It does not seem good practice to me to have to duplicate graphic content for device size as this surely creates longer page load times…

Can this been done with css?

2

Paragraph Pro can do this (break the image above the text on mobile). https://www.bigwhiteduck.com/stacks/paragraphpro/

There’s a couple of examples of floating images in the demo here too: http://demo.bigwhiteduck.com/paragraphpro/

3

Excellent. Thank you very much for the reply. Appreciate you help and suggestion very much.

1 Like
4

There is also my Floaty stack that does a bit more… https://joeworkman.net/rapidweaver/stacks/floaty

5

Ok… thanks much… will check it out…