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

Solved
MissyP2
Excursionist
15 0 3

 

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

 

 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
4092 938 1145

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;
}  
}
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 18 (18)
Dan-From-Ryviu
Shopify Partner
5570 1020 1045

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 a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Made4uo-Ribe
Shopify Partner
4092 938 1145

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".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@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;
}
}

 

  • And Save. 
  • Result:

Made4uoRibe_0-1700016659247.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MissyP2
Excursionist
15 0 3
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.




Dan-From-Ryviu
Shopify Partner
5570 1020 1045

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

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

MissyP2
Excursionist
15 0 3

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.  

 

MissyP2
Excursionist
15 0 3
Made4uo-Ribe
Shopify Partner
4092 938 1145

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, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 481px) {
.pplrabs {
    position: relative !important;
}
}

 

  • And Save. 
  • Result:

Made4uoRibe_0-1700020623416.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
4092 938 1145

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MissyP2
Excursionist
15 0 3

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-arrivals/products/personalized-stroller-blanket...

Made4uo-Ribe
Shopify Partner
4092 938 1145

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MissyP2
Excursionist
15 0 3

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

 

MissyP2
Excursionist
15 0 3
Dan-From-Ryviu
Shopify Partner
5570 1020 1045

You may explain by images to more clearly, we dont get your mean

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

MissyP2
Excursionist
15 0 3

my product image, sorry.  The main product image is not showing correctly on mobile.  It works fine on desktop

 

MissyP2
Excursionist
15 0 3

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.

 

Made4uo-Ribe
Shopify Partner
4092 938 1145

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;
}  
}
Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MissyP2
Excursionist
15 0 3

That worked!!!  Thank you soooo much!!!

 

Made4uo-Ribe
Shopify Partner
4092 938 1145

Thank you too for likes. I am glad I am able to help 😊

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com