Streaming live at 10am (PST)

I want to layout my blog page like this


#1

I want to create a blog layout like this – https://wingspanoptics.com/blogs/field-journal

but once I drag in the collection it automatically populates all sections consecutively.
How to I make it so when I drag in the blog collection it populates every other div/section/link block…
I know this is an easy, stupid question but my brain simply is not seeing the ‘easy answer’ that I know is there.
Please advise.
Thank you!
Jay


Here is my public share link: LINK
(how to access public share link)


#2

bumpity bump bump bump


#3

Hi.

The only way you can do this is by nth-child. wingspanoptics (URL example) - their is “even” and “odd” class - so the same idea could be solved by nth-child (First start from simple example - try to create first collection item with red border and next with blue - idea like this - to learn this issu)
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child_odd_even

You should manually add code to the head tag (And you see the zig-zag effect only on published site):

  1. wrapper (for box1 and box2)
    display: flex;

  2. box1 and box2: width: 50%;

  3. Set order: 2 for the zigzag effect (google it)

    #shopify-section-blog-template .feature-row .even .post-image {
    order: 2;
    }

Start from this than add URL if it wont work (beacuse your Q is more for Video tuturial and/or job-aboard).


#4

Thank you Siton_Systems, very much appreciated!
-Jay


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.