Header image on homepage gets cropped on mobile version

Highlighted
Tourist
4 0 2

Hi, I'm working on my debut theme and while the desktop version looks great, but when I switched to the mobile version, the very top image of my homepage gets cropped out instead of getting scaled accordingly. Is there a way to fix this? Thank you. 

1 Like
Highlighted
Excursionist
20 2 4

sure!

If you go to Theme -> Edit code -> search for theme.scss 

Then at the bottom of the file, paste this code:

 

.hero {
    height: 200px !important;
    display: block !important;
    background-size: contain !important;
}

 

Let me know if this works  

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
1 Like
Highlighted
Excursionist
12 1 1

Please try images of these dimensions: 1200px to 2000px in width, and 400px to 600px in Height which are the recommended sizes for Debut Theme! Share the URL to your website if that doesn't help!

Shopify Development & Support
Problem Solved? Accept ✔️ and Like ? the solution.
Need Code Changes? Send me a direct message.
0 Likes
Highlighted
Tourist
4 0 2

Thank you so much for the reply! I tried it and while the header image nicely fits the mobile version now, it got shrunk on the web version into a small image same as the mobile version. Do I need different codes or images for mobile & desktop sites? Or is there a way that the image can be automatically scaled on the mobile version? Cheers!

0 Likes
Highlighted
Tourist
4 0 2

I managed to adjust it for only mobile site by adding this code before the code line you sent:

 

@media only screen and (max-width: 600px) {

}

Problem solved now, thank you!!!

1 Like