Re: Make all images in a multicolumn section clickable

Solved

Make all images in a multicolumn section clickable

StephenM88
Excursionist
14 0 6

Hi all - I recently redesigned my website using the Whisk theme and am 99% happy, but struggling with a few things.  Primarily, I'm looking to make all of the images in a section of multicolumn clickable.  Currently, the words beneath each image are clickable links but I would like the picture to function that way as well.  Does anyone have any advice for how to solve this in the code?

 

URL: www.UdderlyNuts.com

Section: "Find Your Flavor" on the home page.

 

Please let me know what details you need to help!

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
8531 1681 1692

This is an accepted solution.

Please update code to this 

<style>
.multicolumn__content {
position: relative;
margin-bottom: 24px
}
.multicolumn__content .rte p {
position: unset !important;
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -32px;
}
</style>

 

 

 

- 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 9 (9)

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

Go to Online store > Themes > Edit code > open theme.liquid file, add this code below under <head> element

<style>
.multicolumn__content {
position: relative;
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -16px;
}
</style>

- 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.

StephenM88
Excursionist
14 0 6

That worked great! Thank you!  Only issue is, it messed up a few of the text positions (see photo)

StephenM88_0-1704425397028.png

It's a little worse on mobile, as the texts show up on top of the photos now.

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

Please update the code to this and add links for texts at the top of the images to solve the issue.

<style>
.multicolumn__content {
position: relative;
margin-bottom: 24px
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -32px;
}
</style>

 

 

- 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.

StephenM88
Excursionist
14 0 6

That worked great to fix "Sample Pack" but for some reason "Sundae Funday" is still not functioning despite the product being linked.  It is still showing the text on top and the image for that flavor isn't clickable. Thanks!

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

Please remove that code of this column to solve it

Screenshot 2024-01-05 at 10.53.08.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.

StephenM88
Excursionist
14 0 6

I see that when I Inspect Element, but how do you delete that from the code?

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

This is an accepted solution.

Please update code to this 

<style>
.multicolumn__content {
position: relative;
margin-bottom: 24px
}
.multicolumn__content .rte p {
position: unset !important;
}
.multicolumn__content .rte,
.multicolumn__content .rte a {
position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.multicolumn__content .rte a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: -32px;
}
</style>

 

 

 

- 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.

StephenM88
Excursionist
14 0 6

Thank you - perfect!

Dan-From-Ryviu
Shopify Partner
8531 1681 1692

Very welcome, @StephenM88 

- 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.