Banner Image Won't Resize for Mobile View

Site URL: https://www.anastasiidesign.com

Hi @tuanphan could you please help me with resizing my banner? All banners at the pages look like this on the phone. Thank you in advance!

Here is link https://www.anastasiidesign.com/about

12 hours ago, Anastasiia said:

Site URL: https://www.anastasiidesign.com

Hi @tuanphan could you please help me with resizing my banner? All banners at the pages look like this on the phone. Thank you in advance!

Here is link https://www.anastasiidesign.com/about

Add to Design > Custom CSS

/* resize mobile banners */
@media screen and (max-width:640px) {
.page-banner-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.page-banner-wrapper {
    height: 250px !important;
}
}

Thank you so much!!!!

Hi @tuanphan! May I also ask one more question, so when I am at my project page and scroll to the bottom I see that my text of the description overlay the image and it is terrible. But since I am using a template I cannot figure out how to change it. 

Thank you!!!!

1 hour ago, Anastasiia said:

Hi @tuanphan! May I also ask one more question, so when I am at my project page and scroll to the bottom I see that my text of the description overlay the image and it is terrible. But since I am using a template I cannot figure out how to change it. 

Thank you!!!!

You want to remove it, add an overlay, reduce size or?

I want to have this red text on a main page but I don't want it there when i scroll to the bottom of the project page and it overlay on the banner, not sure if I explained it good enough. So basically if you go to any project page scroll it to the bottom you will see that picture I attached, but I want my homepage on a bottom of the project page. It automatically appears by scrolling to the very bottom

On 4/13/2022 at 3:05 AM, Anastasiia said:

I want to have this red text on a main page but I don't want it there when i scroll to the bottom of the project page and it overlay on the banner, not sure if I explained it good enough. So basically if you go to any project page scroll it to the bottom you will see that picture I attached, but I want my homepage on a bottom of the project page. It automatically appears by scrolling to the very bottom

Hi,

And what you want is remove red text only on bottom of project page?

On 3/24/2022 at 7:39 PM, tuanphan said:

Add to Design > Custom CSS

/* resize mobile banners */
@media screen and (max-width:640px) {
.page-banner-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.page-banner-wrapper {
    height: 250px !important;
}
}

 

Nope this doesn't work 

On 8/16/2022 at 5:39 PM, gdmartino said:

Nope this doesn't work 

Each case needs a different code.