Alternating Repeater Layout On Oxygen Builder

Published: 4 weeks ago

A recurring requisition about Oxygen Builder repeaters is how to how alternate layouts. This is a relatively simple thing to do with some basic CSS.

.container:nth-child(2n) { flex-direction: row-reverse; }

How and why does this work?

Assuming you are using columns to layout your contents in a side by side manner (like above), they are using flexbox. Flexbox has a nice property called flex-direction:row-reverse, which does exactly what it sounds like... It reverses your row order.

With the repeater, apply a custom class to the div within. Then, use the code above to specify that every even child (that's what 2n means) as the row reverse applied to it. You can specify different child elements (ie 3n, 4n) to spice it up.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

  • James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram