Debut Theme: Hero images and Images with Text Are Cropped In Mobile

Highlighted
Tourist
4 0 0

Hello,

 

New to Shopify so please excuse any of the novice questions.  In Debut Theme, the images and custom banners I made and input appear perfectly in Desktop, but in mobile, they are cropped.  Any advice on how to fix this so the image properly scales while in mobile?  Thank you in advance.  Below is the desired example, in desktop, followed by the mobile version.

 

 

Edit: I would like to say that I researched this forum and found a code that I put into the bottom of my assets>theme code with no success.  It can be found here: https://community.shopify.com/c/Shopify-Design/Debut-Theme-Slideshow-On-Mobile/m-p/313585/highlight/...

 

 

 

Screen Shot 2020-01-09 at 13.23.33.pngIMG_4393.jpeg

0 Likes
Highlighted
Shopify Partner
107 9 17

Hi there, 

 

Could you share a link to your store? I can take a look at the code and provide the answer. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
1 Like
Highlighted
Tourist
4 0 0

Hey there,

 

Thank you so much for the response.  The site is not yet live but here is a preview:  https://xqcvkd4167vie4fg-1524581.shopifypreview.com

 

Chris 

0 Likes
Highlighted
Shopify Partner
107 9 17

Thanks, 

 

There's two things you can do that are working for me, one of to find this class .hero--medium and change the rules as shown below: 

 

 

.hero--medium {
    height: auto;
}

The second is to edit the background-position of the banner this way. 

background-position: center;

 

 

Right now is "center top;" that's why is cropping a bit on mobile. 

 

See here: https://www.loom.com/share/7ddb4b36f86f42daa3dfd1622684f26e 

 

 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
1 Like
Tourist
4 0 0

Hey there, thank you so much again for your response.  I tried to implement your suggestions to look like the following:

 

Screen Shot 2020-01-13 at 12.13.26.pngScreen Shot 2020-01-13 at 12.18.25.png

 

Here is the preview link:  https://jsyecxnosqqika7l-1524581.shopifypreview.com

 

Unfortunately, on mobile,  I am still seeing the undesired cropped results below:

IMG_4416.jpegIMG_4417.jpeg

 

If you have any other suggestions, it would be sincerely appreciated! Thank you for your help so far and timely responses.  

 

0 Likes
Highlighted
Shopify Partner
107 9 17

No worries! Can you send theme collaborator access to oscar@sobefy.com ? I'll take a look at the actual code. 

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes
Highlighted
Tourist
4 0 0

Sounds great, thank you.  From what I've read, I believe collaborators must request access to a store.  I cannot invite you.  Let me know if that's cool and our Admin will accept!  Thanks!

0 Likes
Highlighted
Shopify Partner
107 9 17

Sure no worries

Want to customize or make changes to a theme? Hire me.
If my answer was helpful please Like and Accept Solution.
Email: oscar@sobefy.com
Website: Sobefy.com
0 Likes