My rolleover image isnt the same size

Solved

My rolleover image isnt the same size

TBS2023
Shopify Partner
97 1 7

Hello

 

I have set up 'reveal 2nd image' on scroll

However - the first image still appears behind and the 2nd image doesn't seem to be the same size

I must have done something to the code without realizing.

TBS2023_0-1718861850095.png

 

https://thebodyshop.com.lb/

dosawr

 

 

Accepted Solution (1)
ZestardTech
Shopify Expert
5624 1024 1352

This is an accepted solution.

Hi @TBS2023 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout > theme.liquid and paste this at the bottom of the file:
 

 

<style>
.grid-product__secondary-image {
top: 0 !important;
height: 100%;
}
</style>

 

 

ZestardTech_0-1718867617765.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 6 (6)

sagarnabhoya
Shopify Partner
1 0 0

Hi, i just Check Your Store. 
👉 This is Sagar From Shopifywale.

 

Hi, @TBS2023 
Follow the Below Steps to Solve the Issue
Step 1: Online Stores > Themes > Edit code.
Step 2: Choose File Theme.css under Assests Folder.
Step 3:  Find and Update Below style to top: 0 and bottom : 0 and hit Save.

 

.grid-product__secondary-image {
     top: 12px !important; 
     bottom: 12px !important; 
}

 

Hope this solution works for you. 😊

 

Want to Develop New Feature of Bug Fixing, Hire Us.
If this solution works for you, show some love by giving it a Like or marking it as a solution!
Email : sagar@shopifywale.com

ZestardTech
Shopify Expert
5624 1024 1352

Hi @TBS2023 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

 

.grid-product__secondary-image {
top: 0 !important;
height: 100%;
}

 

ZestardTech_0-1718863465234.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Rahul_dhiman
Shopify Expert
204 40 37

Hello @TBS2023 
Go to online store ---------> themes --------------> actions ------> edit code-------> theme.css
and replace this code.

.grid-product__image-mask {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
}

with this code

.grid-product__image-mask {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

adn the result will be 
Screenshot 2024-06-20 114432.png

and let me know if this was helpful
Thanks 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
TBS2023
Shopify Partner
97 1 7

None of these solutions are working!

Rahul_dhiman
Shopify Expert
204 40 37

Please check your inbox.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
ZestardTech
Shopify Expert
5624 1024 1352

This is an accepted solution.

Hi @TBS2023 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout > theme.liquid and paste this at the bottom of the file:
 

 

<style>
.grid-product__secondary-image {
top: 0 !important;
height: 100%;
}
</style>

 

 

ZestardTech_0-1718867617765.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing