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

Beautifiedbygem
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
oreoorbitz
Shopify Partner
98 10 63

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
KingKongAlfredu
Tourist
4 0 2

Hey, 

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

DavidBBB
New Member
2 0 0

did you find out?

0 Likes
desttmercadoo
New Member
5 0 0

anything???

0 Likes
Baiby-Chrstian
New Member
3 0 0

1200 x 210 px works great with small

0 Likes