Blog Gallery – Alternating Layout Issues

Design help Custom code
1

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

Layout Issues
Layout Issues2232×1284 422 KB

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: Webflow - Amanda Moritz Website

2

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?

3

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

1 Like
4

Done. Does it work now?

5

thanks! Gonna have a look at that.

6

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

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

thanks Jeff, that worked!

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