Can someone give me a better script for image banners on mobile and desktop to adjust the size?

[Filip02]

The prolblem is this not second picture is adapt to image

I now have this script :

1. .banner__media:first-child {
2.     width: 100%;
3. }
4. .banner__media+.banner__media {
5.     display: none;
6. }
7. @media screen and (max-width: 749px) {
8.     .banner__media:first-child {
9.         display: none;
10.     }
11.     .banner__media+.banner__media {
12.         width: 100%;
13.         display: block !important;
14.     }
15. }
16. @media screen and (max-width: 749px) {
17.     .banner__content::before{
18.         padding-bottom: 150% !important;
19.     }
20. }

goorde.com

Password:Kurac

[namphan]

Hi @Filip02,

I checked and didn't find the section you described, can you send me a link that shows this?

I will check it.

[namphan]

Hi @Filip02,

You just need to change 150% => 100% . it will display fine.

[LizHoang · Accepted solution]

Hi @Filip02 

I have checked on your query and see that the Desktop is working as requested now. 

Here is the code for adjustment on Mobile. 

You can follow this instructions: 

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

@media screen and (max-width: 768px){
div.banner.banner--content-align-center {
    height: 370px !important;
}
}

here is the result: 

Desktop : https://prnt.sc/Ua4Lsb2Ttnt5

Mobile: https://prnt.sc/MJAOC77s93Ku