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]

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 tag

Result:

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