Top of product image is hidden on mobile version

Solved
MandyLT
Excursionist
34 0 3

Hi There, 

I've added my first product to my Shopify store and it views fine on the desktop site, on the mobile site however a small portion of my image is hidden by my header bar.  

Does anyone know the code to move the product image down slightly on the mobile version only please?  I have added screenshots below showing how the image looks when the page loads and how i would like the image to look (i've scrolled the screen down to enable me to view the image like this). 

Thank you in advance. 

IMG_7045.PNG

IMG_7046.PNG

 

0 Likes
dmwwebartisan
Shopify Partner
4381 982 1253

@MandyLT 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
MandyLT
Excursionist
34 0 3

Hi 

website URL is little-trip-design.shopify.com

Thanks. 

Mandy. 

0 Likes
MandyLT
Excursionist
34 0 3

0 Likes
MandyLT
Excursionist
34 0 3

Hi 

did you get a chance total a look at this for me? 

Regards, 

Mandy 

0 Likes
dmwwebartisan
Shopify Partner
4381 982 1253

@MandyLT 

Sorry for the delay. I just checked your above given URL. It is not working. Can you please check and send me again?

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
MandyLT
Excursionist
34 0 3

Hi, 

https://little-trip-design.myshopify.com sorry about that.  I missed the 'my' in front of Shopify.  Apologies for that.  Looking forward to hearing from you again. 

All the best,

Mandy. 

0 Likes
dmwwebartisan
Shopify Partner
4381 982 1253

This is an accepted solution.

@MandyLT 

No worries. It worked!!!

Please add the following code at the bottom of your assets/theme.css file.

@media only screen and (max-width: 749px){
.template-product .main-content {   padding-top: 60px !important; }
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
MandyLT
Excursionist
34 0 3

That worked perfectly.  Thank you so much!!  Have a good weekend  Mandy