Make image with text overlay clickable (Empire theme)

Solved
Diamond2
Explorer
62 0 19

When I am using image with text overlay, the text and button fall below the image making the image unclickable. This only happens when I choose "original aspect ratio" but I need to use this and make the image clickable. Please help as this works for "small, medium, large" but not original aspect ratio. 

KetanKumar
Shopify Partner
23454 2357 8631

Hello, @Diamond2 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Diamond2
Explorer
62 0 19

@KetanKumar Please check the link below. As you will see the first image/banner will be clickable on desktop, but on mobile the button goes below the image and makes the entire image unclickable. 

https://www.temporary-url.com/B18540

KetanKumar
Shopify Partner
23454 2357 8631

This is an accepted solution.

@Diamond2 

Thanks for the details 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 719px) {
.pxs-image-with-text.pxs-image-with-text-section-height-original .pxs-image-with-text-content-wrapper {
position: absolute;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Diamond2
Explorer
62 0 19

Thanks. It worked perfectly.

0 Likes
elizamadeline
Tourist
8 0 1

Hi @KetanKumar 

I have just implemented this piece of code on my website and it worked for desktop but not on mobile. Is there a way to fix this? thanks

KetanKumar
Shopify Partner
23454 2357 8631

@elizamadeline 

sorry for any issue

please share issue image?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
elizamadeline
Tourist
8 0 1

@KetanKumar my website is https://2c662t6aki9ye404-37499371579.shopifypreview.com

all the images on the homepage are clickable on desktop but not on mobileScreen Shot 2021-09-24 at 1.59.45 pm.pngScreen Shot 2021-09-24 at 1.59.54 pm.pngScreen Shot 2021-09-24 at 2.00.04 pm.png

0 Likes
KetanKumar
Shopify Partner
23454 2357 8631

@elizamadeline 

oh sorry for that 

please add this code

@media only screen and (max-width: 719px) {
.pxs-image-with-text.pxs-image-with-text-section-height-original .pxs-image-with-text-content-wrapper {
    top: 0;
    width: 100%;
    height: 100%;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
elizamadeline
Tourist
8 0 1

Thanks so much. That fixed it

0 Likes