Size issues with the image in image with text overlay

[ASHWIN_BIYANI]

Hey I am getting an image size issue in the mobile view of my website, while in the desktop view its proper so can the support help me this issue.

i have attached the images for reference. 

[oscprofessional]

Hello,
you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!
Please Share your store live url  where you want to do modification, so that I will solve your issue here!

[ASHWIN_BIYANI]

https://vedicspoons.com/ 

this is my websites live link and i had a option if i change or replace an image then the settings which are gonna do i need to do it again? 

also when i will be applying the code/ solution will it change the images size of whole all in my website?

[oscprofessional]

@media only screen and(max-width:480px){
.hero.hero--medium.hero__overlay.box.ratio-container.js.lazyloaded{
	    background-size: 100%;
    background-position: center;

}
h2.h1.mega-title {
    font-size: 13px;
}
.mega-title {
    margin-bottom: 0;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

[ASHWIN_BIYANI]

i tired the code but its the same in the mobile view the image is getting cropped 

[bracknelson]

Optimized the image or take the help of any designer or coder.

[ASHWIN_BIYANI]

As per the image size i already have optimised it but on the phone view its not proper thats the issue i am facing

[oscprofessional]

If you have already this media then no need add extra

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

add cs in it...

[oscprofessional]

@media only screen and(max-width: 320px){
.hero__inner {
    padding: 12px;
}
.hero.hero--medium.hero__overlay.box.ratio-container.js.lazyloaded {
    background-size: contain;
    height: auto;
    background-position: center center;
}
h2.h1.mega-title {
    font-size: 18px;
}
}

try this

[ASHWIN_BIYANI]

not the cs coding i meant that for image resolution