Product mobile images cropping on Debut Theme

Solved
Excursionist
54 0 1

Hi,
The product images on mobile are cropped from the top. This problem does not occur on the desktop version of the site.
Right now it looks like this:
IMG_2561.PNG

and I would like it to look like this, that I can see the complete product:
IMG_2563.PNG


Thank you very much for your help!!

Shop URL:
www.beerstock.de

0 Likes

Hello 

Add this css at bottom
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
.template-product .main-content {
padding-top: 55px!important;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
54 0 1

this sadly did not work. This is what my store looks like with edited code:

IMG_2564.PNG

0 Likes

Success.

Shopify Expert
665 170 199

Hi, @qcombo ,

This is Evita from On The Map.

 

Remove the previous answer code and add this code. This code will not break anything :)

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

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

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes

Success.

Hello Replace that code with this code

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

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
54 0 1

thanks guys, it worked! :)


@OTM wrote:

Hi, @qcombo ,

This is Evita from On The Map.

 

Remove the previous answer code and add this code. This code will not break anything :)

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

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

 

Best,
Evita


 

1 Like