Banner Image Won't Resize for Mobile View

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!

Hi @taunphan

My banner is experiencing excess cropping, can I please get your help in resizing my banner so that it fits in mobile view? 

I still want to keep the original dimensions so that the whole image is viewable on mobile but keep the image the same as it is in desktop. 

My site url is www.querydistribution.com. Any help is extremely appreciated! Thanks in advance. 

On 7/31/2020 at 10:39 PM, DanaFoletto said:

Hi @taunphan

My banner is experiencing excess cropping, can I please get your help in resizing my banner so that it fits in mobile view? 

I still want to keep the original dimensions so that the whole image is viewable on mobile but keep the image the same as it is in desktop. 

My site url is www.querydistribution.com. Any help is extremely appreciated! Thanks in advance. 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#wm-slider-container {
    height: 60vh !important;
}
}

On 7/30/2020 at 11:50 AM, Amy-Ilyse said:

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!

I think I answered this questions...via forum, email....Not sure. Can you check again?

On 7/30/2020 at 8:54 AM, 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!

Add to Home > Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:640px) {
div#home-section img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

On 7/29/2020 at 10:24 PM, Acon said:

@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
 

Add to Home > Design > Custom CSS

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

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.

@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!!

On 7/25/2020 at 5:59 PM, tuanphan said:

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;
}
}

 

Which banner?

On 7/25/2020 at 5:59 PM, tuanphan said:

On 7/20/2020 at 1:40 PM, 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/24/2020 at 3:30 PM, 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?

@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

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;
}
}