Re: Image gallery on homepage - text not appearing on tiles suddenly

Solved

Image gallery on homepage - text not appearing on tiles suddenly

fotobydan
Tourist
14 0 3

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.

Accepted Solutions (2)

Shine18pk
Shopify Partner
30 7 13

This is an 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

- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️

View solution in original post

Dan-From-Ryviu
Shopify Partner
8536 1683 1692

This is an 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; }

Screenshot 2023-09-07 at 16.34.57.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

Shine18pk
Shopify Partner
30 7 13

This is an 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

- Need a Shopify developer? Chat on WhatsApp
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip , my code - a perfect blend! ❤️
fotobydan
Tourist
14 0 3

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) 

 

1.jpg

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

Dan-From-Ryviu
Shopify Partner
8536 1683 1692

This is an 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; }

Screenshot 2023-09-07 at 16.34.57.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

fotobydan
Tourist
14 0 3

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
Tourist
14 0 3

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

 

thumbnail_Screenshot_2023-09-07-17-55-45-260_com.android.chrome.jpg