isotropic-2022
Share
Blog
Search
Menu

Alternating Repeater Layout On Oxygen Builder

By James LePage
 on January 28, 2021
Last modified on January 6th, 2022

Alternating Repeater Layout On Oxygen Builder

By James LePage
 on January 28, 2021
Last modified on January 6th, 2022

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.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
8is
8is
9 months ago

Can you be more specific? I'm a novice and I'm not sure how to implement this. A full example would be awesome!

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram