How do I reduce the banner size to fit Mobile setting? (custom CSS)

Site URL: https://singswithtrees.com/divination

Hi!

I'm looking for some help with custom CSS to reduce my banner image in the mobile setting. I'm using the Greenwich template. 

I need to adjust the sizes of the banners on all pages, but this page is my current priority:

https://singswithtrees.com/divination

along with the home page:

www.singswithtrees.com 

Any help would be much appreciated! Thank you! 

-Aislinn 

Hi. You mean this image?

and this?

Yes, Tuanphan, those are the ones! 🙂

On 4/30/2021 at 7:22 AM, AislinnBrooke said:

Yes, Tuanphan, those are the ones! 🙂

Add to Design > Custom CSS > Then save & reload your site. If it works, I will check home banner.

/* resize mobile banners */
@media screen and (max-width:640px) {
body#collection-6085d47a2dc9ea4e2f928436, body.homepage {
.Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.Parallax-item:first-child figure {
    transform: unset !important;
}
section.Intro.Intro--has-image {
    min-height: unset !important;
    height: 200px !important;
}}
section#new-page {
    min-height: unset !important;
    height: 250px;
}
}

Hello Tuan, 

Yes,  it works beautifully! Thank you!

Can you help with the code for the homepage?:

www.singswithtrees.com 

Hi again 🙂Also I'm wondering if there a code that can resize for Tablet, too? 

On 5/1/2021 at 3:13 PM, AislinnBrooke said:

Hello Tuan, 

Yes,  it works beautifully! Thank you!

Can you help with the code for the homepage?:

www.singswithtrees.com 

 

 

 

On 5/1/2021 at 3:13 PM, AislinnBrooke said:

Hello Tuan, 

Yes,  it works beautifully! Thank you!

Can you help with the code for the homepage?:

www.singswithtrees.com 

Updated above code. Try add it again & reload your site