Top of product image is hidden on mobile version

[MandyLT]

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. 

 

 

[dmwwebartisan]

@MandyLT 

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

Thanks!

[MandyLT]

Hi dmwwebartisan, 

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

Thanks. 

Mandy. 

[MandyLT]

frohta

[MandyLT]

Hi dmwwebartisan, 

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

Regards, 

Mandy 

[dmwwebartisan]

@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!

[MandyLT]

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. 

[dmwwebartisan · 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! 

[MandyLT]

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