Store is hiccupschildrensboutique.com When scrolling down on mobile device my image goes away. Is there a way to change the code to have the image set instead of floating? [no image.JPG]

My bad, I miss that one. Can you add the code below to the same style.css file @media only screen and (max-width: 481px) { .pplrabs { display: none; } }

You can do that by adding this code at bottom of your styles.css file .product-gallery { position: sticky; top: 0px; }

Hi @MissyP2 As what I understand, you want the image in mobile to be on top when ever the customer is scrolling down on mobile. This might be confusing for customers, that is why added some background to your image. From your Shopify admin dashboard, click on “Online Store” and then “Themes”. Fin…

I tried adding that code at the end of this which is styles.css but still not working. My images are basically not showing half of the time. They keep disappearing as you scroll up and down.

Do you want it always appear event you scroll to very bottom of your page?

Oh. What device are you using? I do not see this problem in my end. Can you show us a video of the problem? So my understanding is you want the image to be always there even when scrolling, which could cover half of the screen

I want it to be a fixed image so if I scroll to the bottom of the page you will not see it until you scroll back up. Right now it comes and goes. It is floating but actually goes away half the time.

Take a look at this product on your phone https://hiccupschildrensboutique.com/collections/new-arrivals/products/personalized-stroller-blanket-knitted-coffee-brown

I don’t want the image to be visible when scrolling. I want it in a fixed position and if you scroll down you may not see it but that’s ok. Here is the link to a product. Look at it on a phone. I will try to record but this is probably easier https://hiccupschildrensboutique.com/collections/new-arr…

Oh my. I see what you mean. That could be annoying. Please change the code provide to this. From your Shopify admin dashboard, click on “Online Store” and then “Themes”. Find the theme that you want to edit and click on “Actions” and then “Edit code”. In the “Assets” folder, click on “base.css, st…

I understand. I do see the problem. Please see my reply above.

Change code for mobile on Flex Theme to keep product image set and not floating

Retired Boards Appdev Store Design

MissyP2 November 15, 2023, 4:01am 12

Ok that fixed part of the problem. it is now fixed but if you scroll on that same product down to the bottom of the page a second image of the blanket is still floating around

Topic		Replies	Views
FREEZE PRODUCT IMAGE (LEFT) WHILST SCROLLING DESCRIPTION (ON RIGHT) Store Design liquid , design , customizations , css , shopify-themes , troubleshooting , html , product-page	6	126	May 9, 2025
How to Make Product Page Images Sticky Scroll in Streamline Theme Store Design design , customizations , css , third-party-themes	8	197	November 18, 2023
How to keep product image fixed while scrolling down the description column Store Design liquid , design , css , product-page	5	263	February 1, 2025
Fixed product image on page scroll. Debut theme Store Design	35	497	September 29, 2024
How to Make Product Images Sticky When Scrolling in symmtery theme? Store Design design , third-party-themes , product-page	2	52	November 2, 2023

Change code for mobile on Flex Theme to keep product image set and not floating

Related topics