Desktop vs tablet vs mobile text shadow

text shadow, perfect in desktop view, is too disconnected in mobile view. Makes it look like a double writing rather than a shadow. How can I remedy this?

Hello there,

Which area do you see that shadow on? Any link you can provide here? Also please mention how that text reads.

Regards,
Kharis
aThemes Support

Sorry, no link as I am developing this site on my local machine using Bitnami/wordpress.

I’ll try to link to screenshots here

mobile

desktop

Hello there,

Your screenshots are too small. Would you please use imgur.com instead? Do you also the same thing on our demo site?

Regards,
Kharis

Not sure what you mean by this. Can you elaborate, please?

Hello there,

I can’t see your screenshots clearly. Because they’re too small. Could you please reupload them to imgur.com and share their links here?

Regards,
Kharis

bigger here

desktop

mobile

any good?

Thank you for sharing. But it seems like you added custom style to that text. How can I reproduce it on my test site? Please share the code if you use custom code.

Regards,
Kharis
aThemes Support

Sorry. My bad. I’m very new to this.

I think this is the relevant css:

    .header-text {
      font-family: a little pot;
      text-align: center;
    }
    .header-text {
      font-size: 110px;
    }
    .header-text {
      text-shadow: 3px 5px #2E2EFF;
    }
    .main-navigation li {
      font-size: 26px;
      text-transform: capitalize;
    }

Thank you for sharing. Try adding this CSS code:

    @media only screen and (max-width: 900px) {
      .header-text {
        font-size: 30px;
        text-shadow: 1px 2px #2E2EFF;
      }  
    }

Regards,
Kharis

Yup. That seems to work. Great. Thanks very much.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support