Adding drop shadow to specific text

Site URL: https://sunfish-shallot-579l.squarespace.com

password: convention

I'm trying to add a drop shadow to the text Our Philosophy, Our latest work, and We partner with. I tried the following code in Custom CSS and it works until I reload the page. I inspect element for the correct yui. Can someone teach me how to do this? Banging my head against the desk here. 

#yui______  {

text-shadow: 3px 5px 3px 

 rgba(0,0,0,.6);

}

2 hours ago, bpc said:

Site URL: https://sunfish-shallot-579l.squarespace.com

password: convention

I'm trying to add a drop shadow to the text Our Philosophy, Our latest work, and We partner with. I tried the following code in Custom CSS and it works until I reload the page. I inspect element for the correct yui. Can someone teach me how to do this? Banging my head against the desk here. 

#yui______  {

text-shadow: 3px 5px 3px 

 rgba(0,0,0,.6);

}

 

Try this plugin to get the correct id

Squarespace ID Finder - Chrome Web Store (google.com)

14 hours ago, bangank36 said:

Try this plugin to get the correct id

Squarespace ID Finder - Chrome Web Store (google.com)

That gives me a block id, which is helpful but not what I need. I'd like only the text "Our Philosophy" to have a drop shadow. Not the entire block.

You can make the text bold and select it with

block-id strong {}

1 hour ago, bangank36 said:

You can make the text bold and select it with

block-id strong {}

I'm not sure how to do that.

5 hours ago, bpc said:

I'm not sure how to do that.

hmm, you used h2 tag for title, can take advantage of it like so, repeat to get it on other text

#block-abeefcda61c652804b26 h2  {
  text-shadow: 3px 5px 3px 

 rgba(0,0,0,.6);
}

You're my hero!

4 hours ago, tuanphan said:

Do you need help to solve these?

Site URL: https://sunfish-shallot-579l.squarespace.com/

1. (Desktop/Tablet – Homepage) Increase text width?

 

2. (Mobile – Footer) Make “By Brian Carlson” on the same row

3. (Tablet – Homepage) Equal height all boxes

4. (Tablet – homepage) Reduce space above/below “We partner with”

5. (Mobile – Homepage) Uneven spacing between icons and text

6. (Mobile – homepage) The line above Services doesn’t look good

If you want to help with each of those then by all means I'm willing to listen! Some of that I'm not seeing on my end, like 6. 

16 hours ago, bpc said:

If you want to help with each of those then by all means I'm willing to listen! Some of that I'm not seeing on my end, like 6. 

Q1+2. Add to Design > Custom CSS. If it works, let me know. I will continue checking other questions

/* tablet how can we help */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60da419f7d1bdf4fd2d09189 .span-5 {
    width: 70%;
}
}
/* Mobile footer */
@media screen and (max-width:767px) {
div#block-8bbac330622bd5968be6 * {
    font-size: 18px;
}
}

@tuanphan

They work! I just realized that the reason the width looks wrong on the tablet/desktop part of How can we help? is because there is a form there that I haven't completed setting up, so it's not showing on the site yet. 

On 7/15/2021 at 2:55 AM, bpc said:

@tuanphan

They work! I just realized that the reason the width looks wrong on the tablet/desktop part of How can we help? is because there is a form there that I haven't completed setting up, so it's not showing on the site yet. 

Q3 + 4. Add to Design > Custom CSS

/* Homepage carousel slide */
@media screen and (min-width:768px) and (max-width:991px) {
body.homepage .user-items-list-carousel .list-item {
    min-height: 450px !important;
    justify-content: center;
}
/* partner space */
[data-section-id="60de1a6247a0031578f0231e"] {
    min-height: unset !important;
}
}

Q3:

Is there a way to have them be equal size even on desktop? The boxes change with how much text I write. I'm going to try and keep the text the same length for all of them so they are the same size but that may be hard to do.

Is there a way to have the header space the same for all  the sections (Our Philosophy, Services, Our latest work, etc.) on mobile, tablet, and desktop? Right now they seem to all be different sizes depending on what device you're using to view the site. One of the challenges is I'm having to use anchor links to do smooth scrolling. I think this is throwing off the spacing. 

On 7/16/2021 at 8:41 PM, bpc said:

Q3:

Is there a way to have them be equal size even on desktop? The boxes change with how much text I write. I'm going to try and keep the text the same length for all of them so they are the same size but that may be hard to do.

Is there a way to have the header space the same for all  the sections (Our Philosophy, Services, Our latest work, etc.) on mobile, tablet, and desktop? Right now they seem to all be different sizes depending on what device you're using to view the site. One of the challenges is I'm having to use anchor links to do smooth scrolling. I think this is throwing off the spacing. 

Q3. Add new code

/* Homepage carousel slide */
body.homepage .user-items-list-carousel .list-item {
    min-height: 550px !important;
    justify-content: center;
}
/* Homepage carousel slide */
@media screen and (min-width:768px) and (max-width:991px) {
body.homepage .user-items-list-carousel .list-item {
    min-height: 450px !important;
    justify-content: center;
}
/* partner space */
[data-section-id="60de1a6247a0031578f0231e"] {
    min-height: unset !important;
}
}

You can adjust number 550

On 7/17/2021 at 6:48 PM, tuanphan said:

Q3. Add new code

/* Homepage carousel slide */
body.homepage .user-items-list-carousel .list-item {
    min-height: 550px !important;
    justify-content: center;
}
/* Homepage carousel slide */
@media screen and (min-width:768px) and (max-width:991px) {
body.homepage .user-items-list-carousel .list-item {
    min-height: 450px !important;
    justify-content: center;
}
/* partner space */
[data-section-id="60de1a6247a0031578f0231e"] {
    min-height: unset !important;
}
}

You can adjust number 550

Thanks!

A few comments:

- The adjustment for the carousel slide on smaller screens doesn't seem to be doing anything.

- The code you provided for the partner space was helpful but it didn't solve the problem of all the sections having different spacing depending on your screen size. Is there a way to have the spacing the same for all  the sections (Our Philosophy, Services, Our latest work, etc.) on mobile, tablet, and desktop while also using anchor links? I don't mind if the space adjusts with each screen size, I just want them to all be the same. 

On 7/3/2021 at 12:32 AM, Beyondspace said:

hmm, you used h2 tag for title, can take advantage of it like so, repeat to get it on other text

#block-abeefcda61c652804b26 h2  {
  text-shadow: 3px 5px 3px 

 rgba(0,0,0,.6);
}

 

Hi, I'm also trying to do this but it's not working for me.  The URL is ottonehardware.com and I'm trying to make the text in the middle of the banner image have a drop shadow: "Luxury brass hardware, hand aged".  I got the block ID from the Chrome Extension and I'm using this in Custom CSS:

#block-63ebd9588a7d6fad43354049 h1 {
  text-shadow: 0px 0px 10px #383635
}

What am I doing wrong?

On 2/16/2023 at 3:02 AM, elmeto said:

Hi, I'm also trying to do this but it's not working for me.  The URL is ottonehardware.com and I'm trying to make the text in the middle of the banner image have a drop shadow: "Luxury brass hardware, hand aged".  I got the block ID from the Chrome Extension and I'm using this in Custom CSS:

#block-63ebd9588a7d6fad43354049 h1 {
  text-shadow: 0px 0px 10px #383635
}

What am I doing wrong?

Try changing to another color, see this

#block-63ebd9588a7d6fad43354049 h1 {
    text-shadow: 0px 0px 10px #f1f;
}

3 hours ago, tuanphan said:

Try changing to another color, see this

#block-63ebd9588a7d6fad43354049 h1 {
    text-shadow: 0px 0px 10px #f1f;
}

Thanks very much for this. It doesn't work for me though. In fact, I think CSS in Code Injection is not working for me full stop. I've been trying to customise various things in there over the last couple of weeks but nothing works. Squarespace just say it's not supported.

39 minutes ago, elmeto said:

I think CSS in Code Injection is not working for me full stop.

The CSS should be added to Design > Custom CSS - not added to Code Injection 🙂

Did this help? Please give feedback by clicking an icon below  ⬇️

Duh, of course!... Thank you!