Solved

How to make product image clickable not just the title

jewellerystore1
Excursionist
76 0 8

Hello, 

 

I added some css recently to put my product titles on top of the image rather than below. Now i've noticed only the title of the product is clickable and not the image itself. Can someone please help me make the images of products and collection cards clickable to the specific product page. 

 

Thank you!!

https://nuijewellery.com.au/collections/static-collection

 

Theme is dawn 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Update this code in your base.css file from this 

@media only screen and (min-width: 200px) {
.card__content {
position: absolute;
bottom: 10px;
margin-left: 10px;
left: 0; /* Adjust to position on the bottom left */
padding: 0px; /* Add padding for spacing */
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}

To this 

@media only screen and (min-width: 200px) {
.card__content {
position: absolute;
bottom: 10px;
margin-left: 10px;
left: 0; /* Adjust to position on the bottom left */
padding: 0px; /* Add padding for spacing */
top: 0;
right: 0;
align-items: end;
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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 3 (3)

Dan-From-Ryviu
Shopify Partner
7566 1461 1459

This is an accepted solution.

Update this code in your base.css file from this 

@media only screen and (min-width: 200px) {
.card__content {
position: absolute;
bottom: 10px;
margin-left: 10px;
left: 0; /* Adjust to position on the bottom left */
padding: 0px; /* Add padding for spacing */
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}

To this 

@media only screen and (min-width: 200px) {
.card__content {
position: absolute;
bottom: 10px;
margin-left: 10px;
left: 0; /* Adjust to position on the bottom left */
padding: 0px; /* Add padding for spacing */
top: 0;
right: 0;
align-items: end;
}
.card-wrapper:hover .card__content .card__information {
background: transparent;
}

 

- Helpful? Like or Accept solution! - Buy me a codefee 🙂
- 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

jewellerystore1
Excursionist
76 0 8

Legend! Thanks so much it worked!

BrainStation23
Shopify Partner
273 46 44

HI @jewellerystore1 
We have gone through your problem and found a solution. 
Solution:
You can follow these steps to achieve your result 
Go to online store->edit code-> base.css file And past the below code top of the file 

@media only screen and (min-width: 200px) {
 .card__content {
   position: absolute;
   bottom: 10px;
   margin-left: 10px;
   left: 0; 
   padding: 0px; 
   top: 0;
   right: 0;
   align-items: end;
 }
 .card-wrapper:hover .card__content .card__information {
   background: transparent;
 }
}



Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com