Image gallery on homepage - text not appearing on tiles suddenly

[fotobydan]

Hi everyone,

I've been using the Alchemy theme from Clean canvas for a while now, really happy with it.

On the homepage I have image tiles which link through to collections. I noticed that the text that was appearing on each tile is no longer there.  

The text isn't appeatring on the theme customiser either.  However, when i do a clean install of the theme, text appears on image tiles in the theme customiser.

I can't seem to resolve the issue with disabliing apps, and to my knowledge, I have not installed any new apps recently.

https://shop.snapemaltings.co.uk/

Can anyone help?

The app developers can't help unfortunately.

[Shine18pk · Accepted solution]

Hey 
I saw your homepage, and was able to debug the issue. 

There is an app or some other css code which is overriding the overlay class of your theme styles. 

Please add this code in your theme.liquid file before </body> tag

<style>
.img-block__img-wrapper .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex!important;
    left: 0;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    pointer-events: none;
}
</style>

 
Let me know how it goes. 

Best Regards,

Aakash Ahmed

[Shine18pk · Accepted solution]

Hey 
I saw your homepage, and was able to debug the issue. 

There is an app or some other css code which is overriding the overlay class of your theme styles. 

Please add this code in your theme.liquid file before </body> tag

<style>
.img-block__img-wrapper .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex!important;
    left: 0;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    pointer-events: none;
}
</style>

 
Let me know how it goes. 

Best Regards,

Aakash Ahmed

[fotobydan]

Thanks Aakash.

This has worked, so thank you very much.

There's a slight issue with the sticky header logo they greys out when scrolling down, only when i scroll past the image tiles - only on mobile.  (see screenshot) 

Apart from that, the problem has been solved, thank you.

[Dan-From-Ryviu · Accepted solution]

Hi @fotobydan 

You can solve the issue by adding this CSS code at the bottom of your styles.css or styles.css.liquid file in Online store > Themes > Edit code > Assets 

.img-block__img-wrapper .overlay { display: flex !important; background: transpartent !important; }
.img-block__img-wrapper .overlay .overlay__block { opacity: 1 !important; }

 

[fotobydan]

Many thanks for the two responses.

I added the code into the styles.css.liquid file and that's worked.

Thank you so much for the help.

[fotobydan]

Ahh, on further reflection, although it worked a treat on desktop, when i preview the shop on mobile, the tiles block everything so i had to delete the code.  

Any idea how i can get it working on mobile too?

Thanks