Streaming live at 10am (PST)

Blog Gallery – Alternating Layout Issues

Hey everyone,

I’m having trouble building a blog gallery page with alternating layouts for each row. Rows consist of an image and rich text and I want the image to be right of the text, then left, then right and so on.

The same issue has been discussed here: Alternating Layouts within Collection Lists.

I am trying to implement @Byron 's custom code solution from the thread:

.w-dyn-item:nth-child(even) .blog-flex-row-1 {
  flex-direction: row-reverse; 
}

I gave the row wrapper the class .blog-flex-row-1, but it doesn’t seem to work.

In addition to this, two of the five preview images are way too small on the published page

They look fine in the designer and on preview though.

Can anyone guide me through what I’m doing wrong here?

Thank you!

Read-only Link: https://preview.webflow.com/preview/amanda-moritz-website?utm_medium=preview_link&utm_source=dashboard&utm_content=amanda-moritz-website&preview=58a3bf7882ff96c2fb195ffa3fbaaf0e&mode=preview

Your published site (home) page is not in sync with your current layout in the designer. Can you publish so we could inspect the page with a browser?

I dont know if this will be helpful but solution starts at 9min

1 Like

Done. Does it work now?

thanks! Gonna have a look at that.

are you pointing right selector? I see missing s .w-dyn-items and no .w-dyn-item Screenshot 2020-07-27 at 15.17.55

Update your selector as below;
<style> 
	.w-dyn-item.blog-flex-row-1:nth-child(even){
      flex-direction: row-reverse; 
  }
</style>
1 Like

thanks Jeff, that worked!

Just for my understanding: Why didn’t it function with Byron’s original solution?