tuanphan Posted July 15, 2020 Share Posted July 15, 2020 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; } }  zala 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TrojanMarketingGroup Posted July 15, 2020 Share Posted July 15, 2020   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
NKAISER Posted July 15, 2020 Share Posted July 15, 2020 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
randisylvester Posted July 16, 2020 Share Posted July 16, 2020 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 Link to comment
TrojanMarketingGroup Posted July 17, 2020 Share Posted July 17, 2020 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
tuanphan Posted July 20, 2020 Share Posted July 20, 2020 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TrojanMarketingGroup Posted July 20, 2020 Share Posted July 20, 2020 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. Link to comment
DanaFoletto Posted July 24, 2020 Share Posted July 24, 2020 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/  Link to comment
tuanphan Posted July 26, 2020 Share Posted July 26, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Wanderdoll Posted July 27, 2020 Share Posted July 27, 2020 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! Link to comment
pealpealpeal Posted July 28, 2020 Share Posted July 28, 2020 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   Link to comment
DanaFoletto Posted July 28, 2020 Share Posted July 28, 2020 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. Link to comment
tuanphan Posted July 28, 2020 Share Posted July 28, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Wanderdoll Posted July 28, 2020 Share Posted July 28, 2020 4 hours ago, tuanphan said: Can you share site url? https://oval-buffalo-n69g.squarespace.com/our-team Link to comment
Wanderdoll Posted July 28, 2020 Share Posted July 28, 2020 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; } } Link to comment
Acon Posted July 29, 2020 Share Posted July 29, 2020 (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  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 Edited July 29, 2020 by Acon Link to comment
BrokenRail Posted July 30, 2020 Share Posted July 30, 2020 (edited) 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! Edited July 30, 2020 by BrokenRail Added images Link to comment
Amy-Ilyse Posted July 30, 2020 Share Posted July 30, 2020 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! Link to comment
DanaFoletto Posted July 31, 2020 Share Posted July 31, 2020 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.  Link to comment
tuanphan Posted August 3, 2020 Share Posted August 3, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted August 3, 2020 Share Posted August 3, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
SamanthaFukui Posted August 4, 2020 Share Posted August 4, 2020 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. Link to comment
tallytwo Posted August 4, 2020 Share Posted August 4, 2020 @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!! Link to comment
TrojanMarketingGroup Posted August 5, 2020 Share Posted August 5, 2020 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment