Responsive image cropping with Debut theme

Solved
New Member
6 0 0

So this has been covered a lot before and I've read through a lot of responses that have worked for others - but I can't seem to get anything to work for me!  

 

My collection images are being cropped/cut down when being viewed on a mobile device.  They are currently (and I'd like to keep them) full width in a normal browser.  Has anyone got any suggestions on how to resolve this?  I'm happy editing code etc.  


TIA 
Carl

REELFILMCELLS

0 Likes
Shopify Expert
2461 414 519

Hi @Carl_Reelfilm 

i have checked your collections  page i can't see any image crop in mobile, send me screenshot so i can solve this. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0

Hi thanks for your reply. Sorry maybe my wording wasn’t great.  

The VHS lamps and Film Cell collections (Linked in the menu bar). The image that displays at the top of both of those pages is the image assigned to each of the collection. And it’s being cropped viewing on a mobile. I understand this might be by design but I’d really like to be able to scale the image down instead of crop so that all the image is visible Ona mobile. 

 

C8D4A7C3-E5DC-4EC9-8409-657339338FC5.jpeg

0 Likes

Success.

Shopify Expert
2461 414 519

Follow this:

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: 767px) {
  .collection-hero__image{background-size: contain; }
   .collection-hero__image {  height: 180px !important;}
     .collection-hero{     margin-bottom: 0px;}
 }
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
6 0 0
Hi Jasoliya

Perfect that's fixed it straight away. Thank you so much for your help. Wish I'd asked sooner and not wasted a day playing around with the CSS myself 😂

Thanks again
Carl
0 Likes
New Member
6 0 0

And the same question for a gallery image at the top of the main page.  

I seem to be either able to get it not filling the full width in desktop view and scaled fine for mobile view.  Or filling the full screen in desktop view and cropped in mobile view (as attached).

 

Thanks in advance if you can help :o)   

reelfilm1.PNG

0 Likes
Shopify Expert
2461 414 519

No If i set image in full width then image will cut so you need to upload full width image. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
3 0 0

I have a similar issue, Except, mine isn't a collection, but just an image banner

0 Likes
Shopify Expert
2461 414 519

Send your store url

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
3 0 0

Hi, its ddonline.ca

 

0 Likes