Front-page slider text stroke looks ugly

  • Hello,

    I use the Kale theme for my website.

    The text stroke of the captions I have on the slider on my front page now looks ugly all of a sudden. It was working correctly weeks ago. It looks like the stroke is now “spilling” over into the solid part of the text. I see the issue on my desktop and mobile device.

    I have not made any changes to the Appearance section of my theme recently.

    How do I fix this?

    Here’s what I have in my “Additional CSS” section that may be relevant to this:
    .frontpage-slider .caption, .frontpage-slider .caption h2 a, .frontpage-slider .caption h2:before {
    font-weight: bold;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
    }

    I’ve had this code in my CSS for a long time. The issue wasn’t caused by any change I made to CSS recently.

    Can anyone help fix the issue?

    Thanks.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @fijoy, thanks for getting in touch!

    The -webkit-text-stroke-width and -webkit-text-stroke-color properties are non-standard and aren’t recommended for use on production sites, since they are limited and varied in their implementation by browsers, as well as subject to change in behavior at any time:
    https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke-width

    A more standard alternative might be the text-shadow property- it won’t be identical, but should do the trick if you’re primarily looking to improve legibility on the caption text:
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;

    Hope this helps- best of luck, and let us know if you need anything else!

    Thread Starter fijoy

    (@fijoy)

    That helped, thank you!

    Happy to hear that…if you need anything else, just let us know! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Front-page slider text stroke looks ugly’ is closed to new replies.