Shopify themes, liquid, logos, and UX
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;
}
Solved! Go to the solution
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:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
Hi, @ai41
Can you share your store url so that I can help you?
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:
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024