Forum Academy Marketplace Showcase Pricing Features

Staggered layout with new responsive engine?

Has anyone come up with a way to create a staggered page layout having image and copy alternating left and right down the page?

I’ve been able to do it only by replicating some elements in every other “row”. Has anyone come up with a “clean” way to implement this rather common UI pattern without using CSS?

-Steve

1 Like

I looked at the link and did something quickly.

Like this ugly mess below?

Screen Shot 2021-12-01 at 2.10.03 AM
Screen Shot 2021-12-01 at 2.10.42 AM
Screen Shot 2021-12-01 at 2.10.35 AM
Screen Shot 2021-12-01 at 2.10.29 AM
Screen Shot 2021-12-01 at 2.10.03 AM

If the goal for responsive is not like the link and you want the text and buttons to go on top of the image when page shrinks then the reverse position custom CSS can be applied to the groups that have the images on the left

Screen Shot 2021-12-01 at 2.12.11 AM

1 Like

Thanks, @boston85719. My apologies for not elaborating on the responsive behavior. I do indeed want the copy to be above each image when the page width shrinks. Sorry for not being clear.

Yeah, CSS makes almost anything possible, but I was wondering about an approach using existing capabilities of the new layout engine. I’m looking forward to new possibilities when it’s out of beta and has additional features such as padding and more conditional control over the various settings.

Thanks again,

-Steve

Yes! The new engine will be great once they provide access to all properties in the conditionals that are part of the layout.

Should be easy enough for them to do.

For the ability to change the position of the copy using a conditional, all they would need to do is expose the layout properties of ‘next’ ‘previous’ etc.

I really hope they push out some new features related to conditionals and the layout properties. Until they do I feel like my legs have been chopped off at the knees with the new engine.