Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
TheIDBootCamp

Banner Image Won't Resize for Mobile View

Question

Hello, 

Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image.

Thanks in advance.

IMG_5025.PNG

Screen Shot 2019-12-13 at 11.16.48 AM.png

Share this post


Link to post

Recommended Posts

  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

 

 

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/

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
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.

Share this post


Link to post
  • 0
On 7/16/2020 at 3:15 AM, TrojanMarketingGroup said:

 

 

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

Hi. Which image?

image.thumb.png.20d5cc00305a244e630b28bff0e16576.png

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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
6 hours ago, tuanphan said:
On 7/15/2020 at 1:15 PM, TrojanMarketingGroup said:

Hi. Which image?

image.thumb.png.20d5cc00305a244e630b28bff0e16576.png

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

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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! 

Lan mobile issue.png

lan regular.png

Screen Shot 2020-07-27 at 2.18.01 PM.png

Share this post


Link to post
  • 0

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

image.thumb.png.4340a3602b69377127bb1c3dca0d8534.png

But the image cuts off when I'm on my phone:
115908415_329943804857595_9044348398506501658_n.jpg?_nc_cat=101&_nc_sid=ae9488&_nc_ohc=5sGGvvriaUMAX9V_wR7&_nc_ht=scontent-sea1-1.xx&_nc_tp=7&oh=ccbd1b54b78804ebfe5bb4c58e12f186&oe=5F450013

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

  

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
Posted (edited)
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

Articles of ADOS.png

 

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
IMG_6549.thumb.PNG.5e4f44c8fe58501cbfb84995fb300db7.PNG

Edited by Acon

Share this post


Link to post
  • 0
Posted (edited)

F1CB8E3B-C10D-4F3A-A889-FB376CCA90D6.thumb.png.1f008ff003a6060117fd5550054a5ea4.pngA8A5F81B-0E26-4B44-90E1-72AF572216FB.thumb.png.477a333e5a823bdedb305294b9982ab4.pngI’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!

Edited by BrokenRail
Added images

Share this post


Link to post
  • 0
2 hours ago, BrokenRail said:

F1CB8E3B-C10D-4F3A-A889-FB376CCA90D6.thumb.png.1f008ff003a6060117fd5550054a5ea4.pngA8A5F81B-0E26-4B44-90E1-72AF572216FB.thumb.png.477a333e5a823bdedb305294b9982ab4.pngI’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!

Screen Shot 2020-07-29 at 9.36.11 PM.png

Screen Shot 2020-07-29 at 9.36.43 PM.png

Share this post


Link to post
  • 0

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. 

 

Screen Shot 2020-07-31 at 8.31.58 AM.png

Screen Shot 2020-07-31 at 8.32.15 AM.png

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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.

Screen Shot 2020-08-04 at 1.48.29 PM.png

screenshot website.jpg

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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

Share this post


Link to post
  • 0
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;
}
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...