Image not resizing on mobile on debut theme

New Member
1 0 0


On the main page of my website which runs the Debut theme,  I added an "image with text overlay" which looks great on desktop. The problem is when I change to mobile, the image gets cropped from both left and right to fit the mobile screen, leaving only the middle of the image visible. How can I make it so the image will automatically resize to show on mobile fully. 

I've been trying to fix this for the past couple of days, reading all the solutions I've found online for people having the same problem as me, editing code just the way the solutions stated, but none of them seem to work for my site.

Solutions I found and tried but didn't work for me : 

    background-size: contain !important;
    height: 41vw !important;
    width: 100% !important;


Another solution that didn't work : 

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

I'm looking forward to your solutions.

Thank you.