Mobile View Cuts Off Image Overlay

[mobodiboutique]

Hi I'm hoping someone can help, all the solutions I found in the forum doesn't work. I'm using debut theme and my image overlay are being cut off when in mobile view. I attached 2 screenshots so you can see my issue. I hope I can get this issue solved.

[KetanKumar]

@mobodiboutique 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

[paramSoft]

Please provide website url and if your store is password protected then also provide password

[mobodiboutique]

Thank you for responding.

www.mobodiboutique.com

password: froleu

[mobodiboutique]

there's a password: froleu

[mobodiboutique]

Thank you for responding.

mobodiboutique.com

password: froleu

[KetanKumar]

@mobodiboutique 

Thanks for it 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
#shopify-section-hero-2 .hero--x-large {
    height: 210px;
} 
}

[mobodiboutique]

its now showing this error messageI think something went wrong because now it looks like this and its not going back to how it looked before 

[KetanKumar]

@mobodiboutique 

Thanks 

can you please let me know where do you have to add this code or best way to add me on staff so i will quick fix

[mobodiboutique]

I have no idea how to do that this is a whole nightmare