sticky product image on my store

Solved

sticky product image on my store

nynkejosephien
New Member
5 0 0

HELP! I've tried everything but i cant seem to get it to work. My product image wont become sticky. my url is faveza.com i only have 1 product so you can see the issue clearly pls help nothing works!!!!! I wanr the left side to stay while the right side scrolls

Accepted Solution (1)

tim
Shopify Partner
3879 382 1418

This is an accepted solution.

For a sticky element to work its parents must have oveflow:visible;

Your theme has 

      .main-content__inner-container, .footer {
        overflow: hidden;
      }

rendered in the <head> portion of the layouts/theme.liquid

 

I do not know whether it was there originally (in this case you can contact your theme developer with complaint) or was added later to fix some problem.

Ideally this should be removed.

 

Alternatively, you can fix your problem by adding the following CSS code to the Theme Settings => Custom CSS:

.main-content__inner-container:has(.product) {
  overflow: visible;
}

The idea for this code is to override the first one, but only on the product page (just in case).

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

View solution in original post

Replies 7 (7)

Taknify
Shopify Partner
227 16 27

Please share your store url and password if it's locked. We can't see what you are having issue with.

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

nynkejosephien
New Member
5 0 0

my url is Faveza.com there is no password!

 

Taknify
Shopify Partner
227 16 27

Taknify_0-1730066652535.png


There should be an option to make sticky on your product OFF on customize page. If you go to Themes->Customize and go to products. 
Alternatively make it so you have a image carousel instead of product media stacked up. You can also make your description shorter for users to read and then add extra content down below. 

 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.
nynkejosephien
New Member
5 0 0

still doesnt work. I just want the description on the right side to scroll when i scroll down the page. I want to get rid of the huge white space if you get what I mean, hope you can help me im really lost here, maybe something in the code?

 

nynkejosephien
New Member
5 0 0

its only on the desktop. I think my old theme was still up but if you check now, my current theme where the problem occurs is on faveza.com. 

tim
Shopify Partner
3879 382 1418

This is an accepted solution.

For a sticky element to work its parents must have oveflow:visible;

Your theme has 

      .main-content__inner-container, .footer {
        overflow: hidden;
      }

rendered in the <head> portion of the layouts/theme.liquid

 

I do not know whether it was there originally (in this case you can contact your theme developer with complaint) or was added later to fix some problem.

Ideally this should be removed.

 

Alternatively, you can fix your problem by adding the following CSS code to the Theme Settings => Custom CSS:

.main-content__inner-container:has(.product) {
  overflow: visible;
}

The idea for this code is to override the first one, but only on the product page (just in case).

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com
nynkejosephien
New Member
5 0 0

omg thank you SO MUCH it finally works ur a life saver!!!!