DEBUT THEME: How can i make an "image with text overlay" not crop on mobile view.

Highlighted
New Member
2 0 0

Hello all!

 

I need help with scaling my image for mobile view. I have tried resizing it using : 1600 by 500, 1920 by 1080 and all the suggested sizing for debut theme, but none of them crop correctly. Is there a code that i can use to make my images responsive? 

 

  • Extra small: 1200px by 200px
  • Small: 1200px by 300px
  • Medium: 1200px by 375px
  • Large: 1200px by 650px
  • Extra large: 1200px by 775px
0 Likes
Highlighted
Shopify Partner
79 9 49

What effect are you looking to achieve with your image?

 

If you're looking to have the image not crop at all, go to your Theme.scss.liquid and put this at the bottom put

 

 

@media (max-width: 749px) {
   .hero {
    background-size: 100% 100%;
    }
}

This will fit your image to the size of the background image, but you're going to get a stretched/squashed image unless your image matches the aspect ratio of the   "image with text overlay" container 

 

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes
0 Likes
Highlighted
Tourist
4 0 2

Hey, 

What is the aspect ratio of the   "image with text overlay" container you earlier mentioned? 

1 Like
Highlighted
New Member
2 0 0

did you find out?

0 Likes
Highlighted
New Member
4 0 0

anything???

0 Likes