Banner Image Won't Resize for Mobile View

I tried the original coding and it resized my image correctly but also gave me the large gap underneath it. When I tried the coding that was supposed to fix the issue, it didn't work for me. Any advice?

On 7/13/2020 at 8:43 AM, CocosAtelier said:

Hi there I am having the same issue except I would like to extend the size of my background section.... I would like it to be taller so that the text overlapping has more space. 

Does anyone have the code for me please?

Can you share link?

6 hours ago, laurenowden said:

I tried the original coding and it resized my image correctly but also gave me the large gap underneath it. When I tried the coding that was supposed to fix the issue, it didn't work for me. Any advice?

Can you share link?

8 hours ago, Thomasheater said:

@tuanphan

I am having the same issue with my desktop vs mobile site. 
 

cubicle2cloudsaviation.com

 

Add to Home > Design > Custom CSS

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

44 minutes ago, tuanphan said:

@tuanphan Thank you very much! it almost worked but I had to change it to 30vh height and min-height. Now my text is kind of smashed together on the mobile version only. Can I do something to fix that or should I rearrange the text? 

www.cubicle2cloudsaviation.com

8 hours ago, tuanphan said:

Can you share link?

 

Can you share link?

Add to Home > Design > Custom CSS

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

 

Hi @tuanphan, I have noticed you have helped a lot of people fix their banners on their mobile site. I have tried a few different codes of yours I have found with no changes. If it helps, I use the Sonora template. Can you help me? My website link is lemonandhoneyphotos.com

@tuanphan really appreciate you helping everyone. Is there maybe a template we could all use or is it on a site by site basis? I'm having a similar issue where I want my mobile banners to not cut off. I want it so either specifically the home page banner video is not cut off or all banners are not cut off. I'm using the 7.0 Hayden Squarespace template for reference.

Hello 🙂 
I am also having the same issue. One of the first codes worked for me but left white space. I am having an issue with my blog and about pages.

https://www.thevulnerablevirago.com/

12 hours ago, Megankate said:

Hello 🙂 
I am also having the same issue. One of the first codes worked for me but left white space. I am having an issue with my blog and about pages.

https://www.thevulnerablevirago.com/

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5eb3b0706fd71a32082ffc7e #page section:first-child {
    min-height: 30vh;
    height: 40vh;
}
}

13 hours ago, TrojanMarketingGroup said:

@tuanphan really appreciate you helping everyone. Is there maybe a template we could all use or is it on a site by site basis? I'm having a similar issue where I want my mobile banners to not cut off. I want it so either specifically the home page banner video is not cut off or all banners are not cut off. I'm using the 7.0 Hayden Squarespace template for reference.

Can you share link to your site? We can check easier.

17 hours ago, randisylvester said:

Hi @tuanphan, I have noticed you have helped a lot of people fix their banners on their mobile site. I have tried a few different codes of yours I have found with no changes. If it helps, I use the Sonora template. Can you help me? My website link is lemonandhoneyphotos.com

Seems fine here. Did you solve?

On 7/14/2020 at 7:54 PM, Thomasheater said:

 

Have you solved it yet?

5 hours ago, tuanphan said:

19 hours ago, TrojanMarketingGroup said:

@tuanphan really appreciate you helping everyone. Is there maybe a template we could all use or is it on a site by site basis? I'm having a similar issue where I want my mobile banners to not cut off. I want it so either specifically the home page banner video is not cut off or all banners are not cut off. I'm using the 7.0 Hayden Squarespace template for reference.

Can you share link to your site? We can check easier.

hi @tuanphan sorry this is the url https://www.trojanmarketinggroup.org/

Hello, I am experiencing this same problem and can't seem to get the code to address it correctly, I've tried inserting different variations of the code that's been posted here with my collection replaced but can't seem to get it to work correctly. Any help?

My site is https://caper-sparrow-e3kx.squarespace.com - Pass: testing123

I'm trying to target the banner at the top of the page, as well as the other banner block towards the bottom (the one with the picture of the two hands)

Thanks in advance for any help, banging my head against the wall on this one!

9 hours ago, tuanphan said:

Can you share link to your site? We can check easier.

 

Seems fine here. Did you solve?

Have you solved it yet?

No, haven't solved yet. I have adjusted the images so they look okay in mobile view but they are still cropping differently from desktop view

On 7/15/2020 at 1:15 PM, TrojanMarketingGroup said:

On 7/15/2020 at 7:25 AM, tuanphan said:

On 7/14/2020 at 6:09 PM, TrojanMarketingGroup said:

@tuanphan really appreciate you helping everyone. Is there maybe a template we could all use or is it on a site by site basis? I'm having a similar issue where I want my mobile banners to not cut off. I want it so either specifically the home page banner video is not cut off or all banners are not cut off. I'm using the 7.0 Hayden Squarespace template for reference.

Can you share link to your site? We can check easier.

hi @tuanphan sorry this is the url https://www.trojanmarketinggroup.org/

@tuanphan just wanted to follow up to see if we could get your help.

On 7/16/2020 at 3:15 AM, TrojanMarketingGroup said:

 

 

hi @tuanphan sorry this is the url https://www.trojanmarketinggroup.org/

Hi. Which image?

On 7/16/2020 at 3:26 AM, NKAISER said:

Hello, I am experiencing this same problem and can't seem to get the code to address it correctly, I've tried inserting different variations of the code that's been posted here with my collection replaced but can't seem to get it to work correctly. Any help?

My site is https://caper-sparrow-e3kx.squarespace.com - Pass: testing123

I'm trying to target the banner at the top of the page, as well as the other banner block towards the bottom (the one with the picture of the two hands)

Thanks in advance for any help, banging my head against the wall on this one!

I think you sent me an email? & I sent the code, not sure...

On 7/16/2020 at 7:06 AM, randisylvester said:

No, haven't solved yet. I have adjusted the images so they look okay in mobile view but they are still cropping differently from desktop view

Can you share url?

6 hours ago, tuanphan said:

On 7/15/2020 at 1:15 PM, TrojanMarketingGroup said:

hi @tuanphan sorry this is the url https://www.trojanmarketinggroup.org/

Hi. Which image?

@tuanphan just the top home banner video, where the TMG black image is currently.  A video should just play when you load the page now. I had told Squarespace using custom code to show mobile fallback image for mobile viewing, but when you load the page on mobile now (trojanmarketinggroup.org), you can see the video being cut off.

Hi everyone, 

I'm having the same trouble as most here. My banner image is experiencing significant cropping when in tablet and mobile view. How can I make it more responsive across all banner images in my site? 

Site: https://www.querydistribution.com/  

On 7/21/2020 at 3:40 AM, TrojanMarketingGroup said:

@tuanphan just the top home banner video, where the TMG black image is currently.  A video should just play when you load the page now. I had told Squarespace using custom code to show mobile fallback image for mobile viewing, but when you load the page on mobile now (trojanmarketinggroup.org), you can see the video being cut off.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#home-banner iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
figure#thumbnail, #home-banner {
    height: 300px !important;
}
#home-banner .banner-thumbnail-wrapper {
    height: 300px !important;
}
}

On 7/25/2020 at 5:30 AM, DanaFoletto said:

Hi everyone, 

I'm having the same trouble as most here. My banner image is experiencing significant cropping when in tablet and mobile view. How can I make it more responsive across all banner images in my site? 

Site: https://www.querydistribution.com/  

Which banner?

Similar issue where the banner image is getting cut off. I've tried the previously mentioned code

<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

Which did resize it but created this black bar underneath (see screenshot)

I've since removed that code since I didn't want the black bar, but if you have one that resizes on mobile without creating that black bar please let me know! 

Hi @tuanphan could I please get your help with resizing my banner image for mobile? I like how it looks on desktop:

But the image cuts off when I'm on my phone:

How do I get it so that the image maintains its 1920x1080 dimensions (or the same aspect ratio) on the mobile version without changing the desktop? And also, when I'm on my phone, the different media banners for each page cycle through. Is there a way to stop this?

Thank you so much, any help is appreciated :) This is the site in case you need it: pealpealpeal.com

Hi @tuanphan it's the first banner on the home page that I'm having issues with. However, this is a problem I'm having across all pages. 

20 hours ago, Wanderdoll said:

 

Can you share site url?

13 hours ago, pealpealpeal said:

Hi @tuanphan could I please get your help with resizing my banner image for mobile? I like how it looks on desktop:

But the image cuts off when I'm on my phone:

How do I get it so that the image maintains its 1920x1080 dimensions (or the same aspect ratio) on the mobile version without changing the desktop? And also, when I'm on my phone, the different media banners for each page cycle through. Is there a way to stop this?

Thank you so much, any help is appreciated :) This is the site in case you need it: pealpealpeal.com

  

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#mainContent .collection-images img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

4 hours ago, tuanphan said:

Can you share site url?

https://oval-buffalo-n69g.squarespace.com/our-team

1 hour ago, Wanderdoll said:

https://oval-buffalo-n69g.squarespace.com/our-team

Found a solution: 

@media screen and (max-width:640px) {.transparent-header.collection-type-page .banner-thumbnail-wrapper {
    padding: 0;
}
}

On 3/31/2020 at 9:33 PM, Lisasumthin said:

Hello, I am getting a large space underneath my header photo when using the code above

 

https://articlesofados.com/

 

@tuanphan This is happening to me as well. It loads the image about halfway and then there is a large gap. Any help would be fantastic.
www.andyconley.com

I’ve been having this same problem for a very long time now. Tried many in this thread but it hasn’t changed anything at all. Could you try and look into my site?

www.brokenrailband.com

The only problem it seems is the first main header Image on the landing page. Perfect on desktop and does not resize for mobile. It seems the other pages are fine and resize perfectly. 
 

Thanks for any help!

2 hours ago, BrokenRail said:

I’ve been having this same problem for a very long time now. Tried many in this thread but it hasn’t changed anything at all. Could you try and look into my site?

www.brokenrailband.com

The only problem it seems is the first main header Image on the landing page. Perfect on desktop and does not resize for mobile. It seems the other pages are fine and resize perfectly. 
 

Thanks for any help!

I'm having the same issue, and have also tried quite a few of the snippets offered in this thread. I've also emailed you @tuanphan The issue exists for us across the site, but the most important image to solve is the bottom banner on our home index page. I'm using Sonora template, which is part of the Brine family. Our site is https://www.triptychstrategies.com The image we're most concerned about is the one depicted in the attached images (though we would love to find a solve for the other banner background images on the site). Any help is greatly appreciated. Thanks in advance!