Banner Image Won't Resize for Mobile View

Thank you @tuanphan! The code worked great for the home page!!! How could I get this to work for the Our Team page as well?

@tuanphan Yes I did solve it, my apologies forgot to post and let you know... I kept trying all the code from your post, so thank you very much! 

On 11/13/2020 at 12:48 AM, tiffa said:

Thank you @tuanphan! The code worked great for the home page!!! How could I get this to work for the Our Team page as well?

 

Use this code for Our Team page

@media screen and (max-width: 2500px) {
    body#collection-5d0ff09d17e3300001eca080 .Parallax-item:first-child img {
        width:100% !important;
        height: auto !important;
        left: 0 !important
    }

    body#collection-5d0ff09d17e3300001eca080 .Parallax-item:first-child figure {
        transform: unset !important
    }

    section#about-our-team {
        min-height: unset !important;
        height: 450px
    }
section#about-our-team .spacer-block {
    display: none;
}
section#about-our-team h2 {
    font-size: 50px;
    position: relative;
    top: -50px;
}
}

I tried all the codes in previous posts but none of them work. It still wont resize my banner image on my homepage. Any help @tuanphan?

my website is : https://yaahdy.com/

This is what it looks like on desktop vs mobile:

8 hours ago, jonathancajina said:

I tried all the codes in previous posts but none of them work. It still wont resize my banner image on my homepage. Any help @tuanphan?

my website is : https://yaahdy.com/

This is what it looks like on desktop vs mobile:

You can add 2 sections & design layout for mobile/desktop. Then we will give the code to hide 1 section on desktop, hide 1 section on mobile

6 hours ago, tuanphan said:

You can add 2 sections & design layout for mobile/desktop. Then we will give the code to hide 1 section on desktop, hide 1 section on mobile

what is the code? or do I have to create a whole new design for mobile first?

13 minutes ago, jonathancajina said:

what is the code? or do I have to create a whole new design for mobile first?

You add 2 sections first, then we can check code easier.

10 minutes ago, tuanphan said:

You add 2 sections first, then we can check code easier.

its only the banner image i want changed for mobile though. Everything else is fine on mobile i just need that resized.

Add 2 banners will be easier.

Add to Home > Design > custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 40vh;
    margin-top: 5vh;
}
}

4 hours ago, tuanphan said:

Add 2 banners will be easier.

Add to Home > Design > custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 40vh;
    margin-top: 5vh;
}
}

 

hi there @tuanphan thank you for helping so many others in a similar position as im in right now. my websites banner image on desktop looks like this:  

but my mobile looks like this: 

is there a way i can fit the entire image on the mobile view in the same way as it fits on the desktop?

Thank you so so much! this is for my partner and my wedding so this would mean the world if you could help!

-Brady

3 minutes ago, bwheeler424 said:

hi there @tuanphan thank you for helping so many others in a similar position as im in right now. my websites banner image on desktop looks like this:  

 

but my mobile looks like this: 

 

is there a way i can fit the entire image on the mobile view in the same way as it fits on the desktop?

Thank you so so much! this is for my partner and my wedding so this would mean the world if you could help!

-Brady

and the website is augustabrady2021.com

2 hours ago, bwheeler424 said:

and the website is augustabrady2021.com

Add to Home > Design > Custom CSS

/* resize home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 20vh;
}
}

HI, 

i was wondering if i can get some help for our header image carousell to be rescale based on the width of the mobile screen?

We would like the image not to be cropped, just resized. 

our website is

https://www.universalbakehouse.my/

I tried using this but doesn't seem to work

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 40vh;
    margin-top: 5vh;
}
}

Hi - I've scrolled through this thread all day and nothing is working for mine 😧 

Would someone mind helping me out with some CSS? My site is : www.opbranding.com

Thanks so much!

19 hours ago, UniversalBakehouse said:

HI, 

i was wondering if i can get some help for our header image carousell to be rescale based on the width of the mobile screen?

We would like the image not to be cropped, just resized. 

our website is

https://www.universalbakehouse.my/

 

I tried using this but doesn't seem to work

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 40vh;
    margin-top: 5vh;
}
}

You mean image under header on homepage?

11 hours ago, introverb said:

Hi - I've scrolled through this thread all day and nothing is working for mine 😧 

Would someone mind helping me out with some CSS? My site is : www.opbranding.com

Thanks so much!

Hi. Which banner?

On 11/22/2020 at 2:26 AM, tuanphan said:

You mean image under header on homepage?

Hi. Which banner?

I'm really only concerned about the ones on the home page. On desktop, my photo on the header, as well as my logo designs on the parallax banners, are visible. But on mobile it cuts down to the center. So I'm wondering if there's a fix, or if I can make a separate site and have mobile viewers fwd-ed there, or if I need to just start from scratch.

Thanks!

Hello, I'm helping someone with designing their site and created a banner that now doesn't scale on mobile view. I was wondering what I should add in the custom css?

http://www.goldenmaid.net/

Hi there,

I tried my best - but without success...

Can someone pls help with resizing the banner image? Thanks a lot!

www.immerdieanderen.de

Hi there, I am having the a similar problem through none of the solutions mentioned are quite working. 

I need to header banner to show 100% width and 100% height on all media queries. The code mentioned above creates a large white space below the header.

website is: 

https://the-big-back-scratch.squarespace.com/

p/w:magico

Thank you so much in advance.

There's a pretty simple solution in 7.1

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {

section[data-section-id="find your section ID below"]{

    min-height: 50vh !important;

}

}

Find your section ID here.

Then adjust the height of your banner by changing the "vh" value.

Note that while making your banner higher, your image will be automatically zoomed in to fit the size of the container.

On 11/27/2020 at 6:40 PM, sonjacorbett said:

Hi there, I am having the a similar problem through none of the solutions mentioned are quite working. 

I need to header banner to show 100% width and 100% height on all media queries. The code mentioned above creates a large white space below the header.

website is: 

https://the-big-back-scratch.squarespace.com/

p/w:magico

Thank you so much in advance.

 

You mean dog - cat banner?

On 11/27/2020 at 12:51 AM, stephgo said:

Hi there,

I tried my best - but without success...

Can someone pls help with resizing the banner image? Thanks a lot!

www.immerdieanderen.de

 

I see banner fine here. Do you still need help?

On 11/24/2020 at 2:19 AM, Tascha1992 said:

Hello, I'm helping someone with designing their site and created a banner that now doesn't scale on mobile view. I was wondering what I should add in the custom css?

http://www.goldenmaid.net/

You mean banner image on cover page?

On 12/3/2020 at 11:00 AM, tuanphan said:

I see banner fine here. Do you still need help?

Hi - I'm fine with that one, thanks! 🙂

Hi @tuanphan,

I've tried using the CSS snippets you provided but keep getting the error message "error reverting."

I have a couple of banner images with text that aren't rendering for mobile on my home page(screenshots attached). I'm using the brine template and version 7.0 (I think) 

Could you please help me resizing the images - specifically the gallery images with text, and the 2 banners (brands and success stats)? None of the code is working 😕

The url is provided in the screenshot - 

14 hours ago, SunnyC said:

Hi @tuanphan,

I've tried using the CSS snippets you provided but keep getting the error message "error reverting."

I have a couple of banner images with text that aren't rendering for mobile on my home page(screenshots attached). I'm using the brine template and version 7.0 (I think) 

Could you please help me resizing the images - specifically the gallery images with text, and the 2 banners (brands and success stats)? None of the code is working 😕

The url is provided in the screenshot - 

Can you share site url? We can check easier