Removing or Editing Text Shadow

[jonathanrockett]

Hey Guys,

I’m having trouble removing the text shadow on a heading (see image).

I know I’ve seen the setting before, but I can’t seem to find it now…

Any help is appreciated!

[nabeel]

Hi @jonathanrockett,

Thank you for reaching out to us. It seems like you’ve added a custom CSS for creating a text shadow, find and remove the following code from your custom CSS:

.e150-8:after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: -0.5em;
    right: -0.5em;
    height: 0.5em;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.125);
    filter: blur(12px);
}

You can also check the Headline element settings and set the Text Shadow options to 0 (see screenshot)

Let us know how this goes!

[jonathanrockett]

Yeah, I had grabbed a header template from Design Cloud… I guess whoever made that template added custom CSS. I have the Text Shadow settings at ‘0’ and ‘transparent’ but it persists, so I guess the CSS is overriding the Pro settings…

I just decided to delete that heading and add another native heading element to solve the problem. It got rid of the text shadow, but now the heading smashes together at narrower screen widths, instead of breaking words to a new line like it should…

[nabeel]

Hey @jonathanrockett,

Thank you for the credentials. Always use the Secure Note to give out the site’s credentials so it’s only visible to you and our staff. I went ahead and added your site credentials in a secure note. I checked your header setup and the issue you’re having is because of the value of line height is too small:

I went ahead and changed it to 1 and then in your Header CSS section I added the following CSS to remove the extra spacing between your heading:

p {
  margin-bottom: 0.2em;
}

This has fixed the issue. Please clear your browser’s cache and check the page now.

Cheers!

[jonathanrockett]

Thanks Nabeel. You guys rock. as usual.

[rad]

You’re most welcome!