Banner Image Won't Resize for Mobile View

8 hours ago, TrojanMarketingGroup said:

 

@tuanphan thanks for your help did not realize you responded. Is there actually a piece of code you can write to resize every single banner on the site for mobile at once, not just individual banners? My website is trojanmarketinggroup.org

Hi. No.

Each banner needs different code.

17 hours ago, tallytwo said:

@tuanphan can you help me too? Same issue. Banner images throughout site wont resize on mobile. I've tried some of the codes you provided throughout this thread, but they seem to be different for each site..?

piaggo.co

Thank you!!

I can't access your site. Can you check again?

17 hours ago, SamanthaFukui said:

Hi @tuanphan! Thank you for helping everyone. Could you please help me resize my banner so it fit's correctly on mobile.

website is www.samanthafukui.com

I'd like it to be spaced like this but it crops like this. Thanks in advance.

Add to Home > Design > Custom CSS

/* Resize mobile banner */
@media screen and (max-width:640px) {
div#content .page-banner-image-container img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#content .page-banner-wrapper {
    height: 100px;
}
}

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

Hi!

I'm trying to use a full bleed gallery on my homepage and it works well on desktop. On mobile though it does not resize though. What can I do to get it to resize? I'm using Brine Template 7.0

Thanks!

I have the same issue, but the css code did not work for me.

Hey Tuanphan,

We're having the exact same problem  - we've tried all the codes put on here and some slightly work but not 100%, we'll get a white block at the top, a black gap at the bottom or it's resized and it's in the site header. 

This is on our home page but we need it done to ALL our pages on the website. Can you help?

Website is: www.workout-wolf.co.uk


 

@tuanphan thanks for the help you've provided to everyone here.  I'm having a similar issue as the other users where my banner images are being cut off in mobile.  I've attached comparison desktop vs mobile images for my landing, boutique and about us pages.  My website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Looking forward to your response.. 🙂

14 hours ago, phowlett said:

@tuanphan thanks for the help you've provided to everyone here.  I'm having a similar issue as the other users where my banner images are being cut off in mobile.  I've attached comparison desktop vs mobile images for my landing, boutique and about us pages.  My website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Looking forward to your response.. 🙂

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

On 8/8/2020 at 4:57 PM, WORKOUTWOLF said:

Hey Tuanphan,

We're having the exact same problem  - we've tried all the codes put on here and some slightly work but not 100%, we'll get a white block at the top, a black gap at the bottom or it's resized and it's in the site header. 

This is on our home page but we need it done to ALL our pages on the website. Can you help?

Website is: www.workout-wolf.co.uk

 

Add to Home > Design > Custom CSS

/* Resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 30vh !important;
    height: 50vh;
}
}
/* END Resize mobile home banner */

On 8/7/2020 at 10:39 AM, Ibtisam said:

I have the same issue, but the css code did not work for me.

Can you share site url? We can check easier.

On 8/7/2020 at 3:42 AM, jherron said:

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

Hi!

I'm trying to use a full bleed gallery on my homepage and it works well on desktop. On mobile though it does not resize though. What can I do to get it to resize? I'm using Brine Template 7.0

Thanks!

 

See fine here. Did you solve?

9 hours ago, tuanphan said:

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

 

@tuanphan the code snippet helped with the optimization of the images from desktop to mobile.  However, they are still being cropped slightly.  In addition, I now have an issue with the text on the images not reducing proportionally in size with them.  Now the text on the pages look way too large.  Would you be able to assist me with fixing the issue I'm now having with the text?

Again website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Thanks again for all the help!!  🙂 

23 hours ago, tuanphan said:

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

 

Hi @tuanphan 

Thank you for your help. We've just tried this code on our website and as you can see it's still the same..

Can you help?

On 8/11/2020 at 2:59 PM, tuanphan said:

Hi @tuanphan  my home page  banner also appears to be cropped in mobile. here is the url:

Vasavikumar.com/home 

22 hours ago, Asiya said:

 

Seems fine here. Did you solve?

On 8/12/2020 at 4:31 PM, WORKOUTWOLF said:

Hi @tuanphan 

Thank you for your help. We've just tried this code on our website and as you can see it's still the same..

Can you help?

 

Can you include site url in your comment? I don't see url to check.

On 8/12/2020 at 2:45 AM, phowlett said:

@tuanphan the code snippet helped with the optimization of the images from desktop to mobile.  However, they are still being cropped slightly.  In addition, I now have an issue with the text on the images not reducing proportionally in size with them.  Now the text on the pages look way too large.  Would you be able to assist me with fixing the issue I'm now having with the text?

Again website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Thanks again for all the help!!  🙂 

Add a section under current section and design layout for mobile. Then I will give the code to show this section on mobile only, also hide current banner on mobile

1 hour ago, tuanphan said:

Can you include site url in your comment? I don't see url to check.

Vasavikumar.com/meetvasavi

4 hours ago, tuanphan said:

Can you include site url in your comment? I don't see url to check.

Yes, it's www.workout-wolf.co.uk

Thank you!

On 8/13/2020 at 9:10 PM, WORKOUTWOLF said:

Yes, it's www.workout-wolf.co.uk

Thank you!

Use this code

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

On 8/13/2020 at 6:16 PM, Asiya said:

Vasavikumar.com/meetvasavi

the url doesn't exist

Hi There,

I read through this thread and was trying to find a solution for this but with a video instead of an image. I have a youtube video embedded in the hero banner on our homepage. It works OK when on a computer but when in mobile view, it zooms in on the video. I used the maple template and did not use any spacer boxes on either side of the banner, only padding. Any help someone could provide would be extremely appreciated. I've gone nuts looking for a solution the last couple of weeks. 

https://www.geyerdevelopment.com/

Thank you for your time.

Erin

12 hours ago, ErinLeah said:

Hi There,

I read through this thread and was trying to find a solution for this but with a video instead of an image. I have a youtube video embedded in the hero banner on our homepage. It works OK when on a computer but when in mobile view, it zooms in on the video. I used the maple template and did not use any spacer boxes on either side of the banner, only padding. Any help someone could provide would be extremely appreciated. I've gone nuts looking for a solution the last couple of weeks. 

https://www.geyerdevelopment.com/

Thank you for your time.

Erin

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#hero-banner figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
section#hero-banner {
    min-height: unset !important;
    height: 50vh;
}
}

On 6/3/2020 at 10:11 AM, tuanphan said:

@media screen and (max-width:767px) {
.homepage section:first-child {
    min-height: 30vh !important;
}
}

 

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

On 8/17/2020 at 8:26 AM, tuanphan said:

Use this code

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

 

the url doesn't exist

Hi @tuanphan thank you for doing that. That seems to do the trick. It's slightly higher than we want but if we play about with the height and that it'll make a white line. 

We also need it to happen on the other pages, can you do that at all?

The URL's:

www.workout-wolf.co.uk

www.workout-wolf.co.uk/athletes

www.workout-wolf.co.uk/about

@tuanphan 

Hello, I'm having a similar problem. My Banners on my "Home" & "Price" Page won't resize for mobile viewing. 

https://megalodon-dove-5dga.squarespace.com/config/pages

PW: hairbraiding123

Thanks for all your help!

10 hours ago, MeToo said:

 

@tuanphan 

Hello, I'm having a similar problem. My Banners on my "Home" & "Price" Page won't resize for mobile viewing. 

https://megalodon-dove-5dga.squarespace.com/config/pages

PW: hairbraiding123

Thanks for all your help!

I see both fine here. Did you find the solution?

On 8/19/2020 at 11:38 PM, Asiya said:

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

I see fine here. It seems you solved?