Laura16Bits Posted June 2 Share Posted June 2 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
creedon Posted June 2 Share Posted June 2 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
Laura16Bits Posted June 2 Author Share Posted June 2 (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) Edited June 2 by Laura16Bits Link to comment
Solution creedon Posted June 2 Solution Share Posted June 2 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. paul2009 and tuanphan 2 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
Laura16Bits Posted June 2 Author Share Posted June 2 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 ! creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment