different image for mobile and Desktop

Solved

different image for mobile and Desktop

ai41
Excursionist
53 0 11

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 

ai41_0-1729617558026.png

 

.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;
}

Accepted Solution (1)
AnneLuo
Shopify Partner
1053 199 222

This is an 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:

AnneLuo_0-1729684601107.png


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

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 3 (3)

AnneLuo
Shopify Partner
1053 199 222

Hi, @ai41 

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

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

ai41
Excursionist
53 0 11
AnneLuo
Shopify Partner
1053 199 222

This is an 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:

AnneLuo_0-1729684601107.png


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

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee