A space to discuss online store customization, theme development, and Liquid templating.
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?
Solved! Go to the solution
This is an accepted solution.
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;
}
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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.
@media only screen and (max-width: 750px) {
.product__images.one-half.column.medium-down--one-whole {
position: sticky;
top: 1rem;
background: white;
z-index: 2;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Do you want it always appear event you scroll to very bottom of your page?
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
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
Oh my. I see what you mean. That could be annoying. Please change the code provide to this.
@media only screen and (max-width: 481px) {
.pplrabs {
position: relative !important;
}
}
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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 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
I understand. I do see the problem. Please see my reply above.
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
This image not showing fixed but floating at bottom of page also
You may explain by images to more clearly, we dont get your mean
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
my product image, sorry. The main product image is not showing correctly on mobile. It works fine on desktop
i don't know what's happening some images don't show at all and others are fixed but all products still have roaming image at the bottom.
This is an accepted solution.
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;
}
}
That worked!!! Thank you soooo much!!!
Thank you too for likes. I am glad I am able to help 😊