Can anyone tell me how this can be fixed?

Shopify Discussion
,
1

https://www.luvicigems.com
https://www.luvicigems.com842×814 42.7 KB
Apparently, the fonts are not visible unless someone touches the screen or moves the cursor over the area where the hidden text is located. The same issue persists on the product and blog pages. What could be causing the fonts to be masked?

1 Like
2

There are several possibilities.
To be more precize it is necessary to see the actual site in question.

1 Like
3

Hi @polycarp

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

1 Like
4

Hey @polycarp,

Could you please share your store url along with the password if applicable so that I can take a look and provide you with the solution code.

Thanks

1 Like
5

Hi @polycarp

This typically occurs when CSS is using opacity, color or z-index on text elements, or animations/hover effects masking the text and revealing it on a hover or touch event.
Look in your theme css for:

opacity: 0 or color: transparent
visibility: hidden
transform: translate or translateY with transition
z-index issues (text behind a background layer)
Fix by making sure the text has a visible color and is not hidden by default:
.product-title, .blog-title {
opacity: 1 !important;
color: #000 !important;
visibility: visible !important;
transform: none !important;
}

And check any custom scripts or animations that make text visible on hover/touch – perhaps they’ll need to be adjusted to run on page load.

6

Thanks! Very helpful indeed :blush: I will try that, but it seems complicated for me. I think I will leave it for the pros to fix it.

7

I completely got you @polycarp,

If you don’t want to share the link the public thread then you share it in the p/m.

Thanks

1 Like