Targeting the first slide

Hello there ! 

I'm trying to target the title on the first slide of a slideshow - in order to reduce the padding on the left.

When I apply the following CSS code, it only targets the description 🤔

.user-items-list-banner-slideshow .slide:nth-child(1) {
    padding-left: 360px !important;}

I tried the following but it targets all the titles : 

.user-items-list-item-container .list-item-content__title:nth-child(1) {color:red;}

Could you please help me to identify which target to use ?

Thank you very much for your help !

Website : https://alpaca-trout-rsh5.squarespace.com/
Password : hono

One issue is that the CSS on your site you've used rd for the color instead of red.

With the padding change. Are you trying to left align or keep the right align but just move the text to the left more?

Hi Creedon ! Yes I've changed it real quick to show something to my client. Bad timing. Didn't want him to see this weird red title. 😂

Even with "red" written in full, the color applies to all slides. I would like to target just the title on the first slide with his name, "Honoré Kouadio."

I'm trying to left align, on two ligns. To achieve something similar as below - while keeping the other titles on one lign. (I hope it makes sense, english is not my mother tongue) 

Thank you so much for your help ! Works like a charm and the slideshow looks so much better. 🔥

I'll keep in mind the hierarchy of the selectors. Your explanation makes sense. Thanks again !

On 6/2/2023 at 4:38 PM, creedon said:

For this issue you have to target higher up in the selector hierarchy to target the first slide. Your current code is targeting the first title of each slide.

Try the following. How does it look?

.page-section[ data-section-id="642ef7ea800a803e7a90aaa7" ] .user-items-list-banner-slideshow .slide:first-child .list-item-content__title {

  color : red;
  
  }

.page-section[ data-section-id="642ef7ea800a803e7a90aaa7" ] .user-items-list-banner-slideshow .slide:first-child .slide-content {

  max-width : 75% !important;
  min-width : 25% !important;
  
  }

This is for v7.1.

Be sure to remove, make a copy somewhere, the CSS for your current effect.

Let us know how it goes.

Hi @creedon, I'm trying to target specific list items in a carousel list section and just can't get it. Any chance you could take a look? Specifically, I want to make the list item content display:none for the first and third item in view--so you'd only see the item content on the middle item. Is that possible? 

https://helicon-oval-8wh9.squarespace.com/

PW: admin

6 hours ago, E-W said:

I'm trying to target specific list items in a carousel list section and just can't get it.

I don't have a solution. I don't think you will be able to get the effect I think you may want with CSS alone. SS, I think, is using some JavaScript for the design you have selected.

Here is some CSS that may get you started.

#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:first-child,
#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .square-hover__img:first-child,
#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:nth-child( 3 ),
#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .square-hover__img:nth-child( 3 )

  {
  
    display : none !important;
    
    }

Let us know how it goes.

15 hours ago, creedon said:

I don't have a solution. I don't think you will be able to get the effect I think you may want with CSS alone. SS, I think, is using some JavaScript for the design you have selected.

Here is some CSS that may get you started.

#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:first-child,
#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .square-hover__img:first-child,
#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:nth-child( 3 ),
#block-yui_3_17_2_1_1710548867481_2807.sqs-block-summary-v2 .square-hover__img:nth-child( 3 )

  {
  
    display : none !important;
    
    }

Let us know how it goes.

@creedon Ah dang! Thanks for taking a look. I found an example of what I want to create here:

https://thehousethatlarsbuilt.com/

I feel like this should be possible to create with list sections with JS. I just need to learn JS 😂.