Jump to content

Banner Image Won't Resize for Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

 

 

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/

Link to comment

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!

Link to comment
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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

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.

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Link to comment

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

  

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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
Link to comment
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

Link to comment

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

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.