Jump to content

How to target specific section style only?

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://bonjrmusic.com/

Hi,

I have a page with alternating video section styles. They alternate almost randomly so I can't target every 2n+1 or something like that. How can I target only sections that have the video on the left side?

18483fdbeb15eb06ccbe428810a3f6ea.png

Basically I will be adding sections as time goes on, and to correctly display everything on mobile I need to use the following code:

/* Home Page Order Fix */
  #collection-5ff20abda6a0ae63d611180e #page .page-section:nth-last-of-type(9),
section:nth-last-of-type(5),
  section:last-of-type {
    .row {
      display: flex;
      flex-direction: column-reverse;
    }
  }

However, I could avoid having to always add a new section to this code if I could target left side video sections only.

Appreciate any help I can get!

Thanks,
Daniel

Link to comment
  • Replies 3
  • Views 426
  • Created
  • Last Reply

Top Posters In This Topic

10 hours ago, tuanphan said:

You can setup section width to 98%, then use this code to target these sections

[data-current-styles*="98"] .row {
    display: flex;
    align-items: center;
}

 

This is awesome, thank you!

I have another active post if you'd like to try help me out with that as well: 

 

Edited by thefakedaniel
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.