Different height for mobile and desktop hero image banner

[cbswco]

Hi guys,

I´ve already found in this forum the option to have different images in mobile and desktop hero banner image in Dawn theme. The problem is that i can´t choose small height banner option for desktop and the option to tick “adjust banner size to image size” on mobile.

Thank you very much for your precious time

[PageFly-Victor]

Hi @cbswco !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

Please use this code;

1. Go to Online Store----->Theme----->Edit code
2. Asset->/base.css ---->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
#Banner-template–15992991842517__1652370981a20f5650::before, #Banner-template–15992991842517__1652370981a20f5650 .banner__media::before, #Banner-template–15992991842517__1652370981a20f5650:not(.banner–mobile-bottom) .banner__content::before {padding-bottom: 165.222222% !important;}
}

Best Regards;

Pagefly

[cbswco]

Hi @PageFly-Victor ! Thanks for your time and fst response. Yes, i already tried this from an older post but it doesn´t works…I think it should be capable to create independent size options, but even though i paste the code it stills remain just one size option for both desktop and mobile images.

Do you have any othe idea? Thank you really much

[PageFly-Victor]

Hi @cbswco !

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
3. paste this code right above the tag:

[id*='section'][id*='image']{ max-width: 80%; width: 100% !important; margin: 0 auto !important; } @media (max-width: 749px){ [id*='section'][id*='image']{ max-width: 100%; } }

Best regards;

Pagefly

[cbswco]

@PageFly-Victor really thanks for your time! There is no such tag in theme.liquid file at least on Dawn…maybe is in other file?

[PageFly-Victor]

Hi @cbswco bro your theme is dawn theme sure?

[cbswco]

Hi @PageFly-Victor so i finally found the tag but it aint working…i paste the code as you said but the only change is that desktop hero image is thicker and mobile is smaller…

[cbswco]

[PageFly-Victor]

max-width: 1300px;Bro use this its best for desktop

[cbswco]

Thanks @PageFly-Victor finally i could do it!!