different image for mobile and Desktop

[ai41]

i want to use two different photo for mobile and Desktop and i used image banner to solve it using this css code , but i face this problem in mobile screen, that the image for mobile shoing not full 

could you please help me to solve it 

.banner__media:first-child {
width: 100%;
}
.banner__media+.banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media+.banner__media {
width: 100%;
display: block !important;
}
}
@media screen and (max-width: 749px) {
.banner__content::before{
padding-bottom: 150% !important;
}

[AnneLuo]

Hi, @ai41 

Can you share your store url so that I can help you?

[ai41]

https://b6448a-44.myshopify.com/

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
@media screen and (max-width: 749px) {
#Banner-template--18388846379263__image_banner_dYNkDU .banner__media::before {
   padding-bottom: 177.695553% !important;
}
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!