Jump to content

Targeting the first slide

Go to solution Solved by creedon,

Recommended Posts

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

 

Link to comment

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?

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Posted (edited)

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) 

image.thumb.png.6b87157a7c28603fda91750074893726.png

Edited by Laura16Bits
Link to comment
  • Solution
Quote

Even with "red" written in full, the color applies to all slides.

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.