Debut theme photo cropping problem

Highlighted
New Member
1 0 0

Hello, im having a problem with the Debut theme where if i change the size of the window my photo crops and you cannot see the full image, as well as on the mobile website. I would really like for the full photo to show on both sites. How can i fix this? And i would be willing to pay $5-10 for someone to code this for me. Thank you!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
93 1 12

Hey there Nathalie,

This is Alex from Shopify Guru team, happy to assist you today!

With the Debut theme there are image size recommendations we can make so that the image is as optimized as possible, however because the theme uses hero images in the slideshow this causes cropping. At this time, there isn't a fix for this. To make the most of the images you're using, try adjusting them to these sizes:

  • Small - 1200px by 475px
  • Medium - 1200px by 489px
  • Large - 1200px by 775px

You'll also want to keep in mind what layout your image is in. Because we can't prevent cropping, you'll want to ensure the most important content is in the center of your image so it isn't cropped on other devices. I also think you'll find this document helpful for best practices for images when deciding size and layout. 

I hope this helps you with you Debut slideshow!

Alex | Customer Success Guru | Shopify

Alex | Customer Success Guru | Shopify
Highlighted
New Member
1 0 0

Hi Alex!  Having the same issue here with the Debut theme(screenshot attached).  I resized it through Shopify (large) and still having trouble making the first image to fit the screen.  Would also like to make it responsive for mobile.  Has there been a workaround for this?  Currently trying to find the image within the code to add a style and see if that works.  Looking for a friend!

Best

Johnny 

0 Likes
Highlighted
Tourist
4 0 2

I am having the same issue here. 

 

If you are a developer and can change the code to make it responsive for me please contact me. I am willing to pay for this fix.

0 Likes
Highlighted
Shopify Expert
2684 67 841

Hi Abdulla, try adding this code to the very bottom of your theme.scss.liquid Asset:

/* --tim: make the hero scale, not crop on resize */
div#shopify-section-hero {
    position: relative;
    padding: 40% 0 0 0;   
    /* aspect ratio of images -- width/height, change percentage as required */
    /* 40% is for 1920x768, for example */ 
}
.hero.ratio-container {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
}
.hero__inner {
    position: absolute;
    display: table;
}
.hero__inner > div {
    display: table-cell;
    vertical-align: middle;
}

Do not forget to make a backup theme copy before editing via Actions->Duplicate.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
Highlighted
Tourist
4 0 2

Thank you so much Tim! your solution solved my problem instantly. The image now resizes and show in full regardless of screen size.

 

I have to admit that your help was million times better than Shopify's help center.

Highlighted
New Member
1 0 0

Hi Tim,

I am running into the same problem with the slider tool. On my mobile device the photos resize perfectly. But on a desktop they are still cropped. I took your code and pasted it exactly as you had it written at the bottom of the theme.scss.liquid asset page. Unfortunately nothing changed. I even tried to change the height and width within your code. Is there something that I am doing wrong? 

Any help would be awesome. 

Thanks! 

0 Likes
Highlighted
Shopify Expert
2684 67 841

Jaren,

I guess you're not doing it wrong, it's just the element structure has been changed between the Debut versions. 

I remember sharing several solutions over the last couple of years, may be one of them will work for you. Or, you may consider downloading a new version of Debut to your shop as unpublished and try the code above.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
4 0 0

Hi Tim,

This solution worked for me as well :) 

However, the text on the image and the button (Shop Now) are not shown correctly on mobile devices.

Is there any way to apply this change as well ?

Kind Regards,

Nicholas M.

0 Likes
Highlighted
New Member
4 0 0

To help you understand please see the below print screen of what I mean.

Keep a note that I have tried to seperate the hero__inner to hero_inner.mega-subtitle and hero__btn in order to do some testing with this but unfortunately I wasn't able to correct it.

 

Thank you,

Nicholas M.

0 Likes