emr10 Posted February 9, 2021 Share Posted February 9, 2021 Site URL: http://charlielangton.com Hi @tuanphan, I have been having the same problem os most people here. I have tried 10 codes posted here before but none fix the problem on my website. Could someone please help? I already deleted most of the footer with my boyfriend's infos thinking it would fix it, but it didn't, sadly. This white blank space is really bothering us. Thank you very much in advance, Erika Link to comment
emr10 Posted February 9, 2021 Share Posted February 9, 2021 1 minute ago, emr10 said: Site URL: http://charlielangton.com Hi @tuanphan, I have been having the same problem os most people here. I have tried 10 codes posted here before but none fix the problem on my website. Could someone please help? I already deleted most of the footer with my boyfriend's infos thinking it would fix it, but it didn't, sadly. This white blank space is really bothering us. Thank you very much in advance, Erika Or also, is it also possible to make this image larger on the mobile? to show more top and bottom? Link to comment
tuanphan Posted February 9, 2021 Share Posted February 9, 2021 1 hour ago, emr10 said: Site URL: http://charlielangton.com Hi @tuanphan, I have been having the same problem os most people here. I have tried 10 codes posted here before but none fix the problem on my website. Could someone please help? I already deleted most of the footer with my boyfriend's infos thinking it would fix it, but it didn't, sadly. This white blank space is really bothering us. Thank you very much in advance, Erika First, remove your code (this code for SS 7.0, your site is 7.1) @media screen and (max-width: 640px) { .Parallax-item:first-child img { width:100% !important; height: auto !important; left: 0 !important; top: 0 !important; } section#about-intro { min-height: unset !important; height: 180px; } } Add this new code /* resize home top banner mobile */ @media screen and (max-width:767px) { body.homepage #page section:first-child { min-height: 20vh !important; height: 90vh; } body.homepage #page section:first-child img { object-position: 15% !important; } } emr10 1 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
tuanphan Posted February 9, 2021 Share Posted February 9, 2021 10 hours ago, MariaFY said: Hi there, I'm hopping on this thread trying to figure out how I can resize my Index page banners on mobile only. I like them full screen (110vh) on desktop, but on mobile the images don't work well. @tuanphan Is this an easy one? I played with css but didn't come to a working solution. Site: https://koala-saxophone-dd8b.squarespace.com/ PW: haiku Muchas gracias Circle familia! Add to Design > Custom CSS /* resize home mobile banner */ @media screen and (max-width:640px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; } section#new-page-3 { min-height: unset !important; height: 250px; } section#new-page-3 * { font-size: 20px; } div#block-yui_3_17_2_1_1611282973245_7194 { margin-top: 100px; } } MariaFY 1 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
tuanphan Posted February 9, 2021 Share Posted February 9, 2021 21 hours ago, capitaltimberco said: Thanks! On the "About us" page there are 2 more images as you scroll down. On the "Arboriculture" page the sliding gallery at the top of the page is cropped as well as on the "saw-milling" and "contact" page. Thanks for all the help! Add to About Us Page Header <style> @media screen and (max-width:640px) { .Parallax-item:nth-child(2) img { width: 100% !important; left: 0 !important; height: auto !important; } section#quote { height: 180px !important; min-height: unset; } } </style> Other images. Next comment https://www.capitaltimbercompany.ca/about-us 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
capitaltimberco Posted February 9, 2021 Share Posted February 9, 2021 5 hours ago, tuanphan said: Add to About Us Page Header <style> @media screen and (max-width:640px) { .Parallax-item:nth-child(2) img { width: 100% !important; left: 0 !important; height: auto !important; } section#quote { height: 180px !important; min-height: unset; } } </style> Other images. Next comment https://www.capitaltimbercompany.ca/about-us Thanks! This worked, however I do not see the "next comment" for the other images. I appreciate all the help! Link to comment
MariaFY Posted February 10, 2021 Share Posted February 10, 2021 Hi @tuanphan, thanks, this code worked super well, and I'm trying to resize other index page banners on the site as well. On the second banner on the homepage, there's a gray bar that shows when scrolling. Do you know why this occurs, or a way to fix it? Thanks a lot, appreciate the help! site: https://koala-saxophone-dd8b.squarespace PW: haiku Link to comment
SouthernSunEvents Posted February 11, 2021 Share Posted February 11, 2021 (edited) Hi @tuanphan I've also been going through all of these codes and trying my hand at this without success. My home page has 3 banner images with large text overlays that I need to size down for mobile view. Website is www.southernsunevents.com Password: sse2020 I so appreciate you helping all of us! Edited February 12, 2021 by SouthernSunEvents Link to comment
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/12/2021 at 12:32 AM, SouthernSunEvents said: Hi @tuanphan I've also been going through all of these codes and trying my hand at this without success. My home page has 3 banner images with large text overlays that I need to size down for mobile view. Website is www.southernsunevents.com Password: sse2020 I so appreciate you helping all of us! It looks like you solved with this code? <style> @media screen and (max-width:640px) { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { transform: unset !important; } section#about-intro { min-height: unset !important; height: 250px; } } </style> 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
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/11/2021 at 5:00 AM, MariaFY said: Hi @tuanphan, thanks, this code worked super well, and I'm trying to resize other index page banners on the site as well. On the second banner on the homepage, there's a gray bar that shows when scrolling. Do you know why this occurs, or a way to fix it? Thanks a lot, appreciate the help! site: https://koala-saxophone-dd8b.squarespace PW: haiku Can you share link to all pages? We can check easier 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
tuanphan Posted February 14, 2021 Share Posted February 14, 2021 On 2/10/2021 at 12:14 AM, capitaltimberco said: Thanks! This worked, however I do not see the "next comment" for the other images. I appreciate all the help! Arboriculture Can you disable autoplay? 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
SouthernSunEvents Posted February 15, 2021 Share Posted February 15, 2021 (edited) On 2/14/2021 at 3:43 AM, tuanphan said: ! Hey @tuanphan, Thanks for looking into this. I made some progress on Saturday but now have the following issues: - Image 1 parallax is disabled while the other 2 images are active. I used the code found thinking it would disable all because I read it's easier to manage overlay text this way but for some reason it's just disabling the first image. I'd like to keep all parallax enabled if possible but at this point just looking for the simplest solution. - Text under image 1 is overlapping. Working on trying to figure this out right now. Seeing this is header 2 font and I need this section it different from the others. Same problem with images. All header 1 font but each photo requires different size fonts. Not sure where to go from here. - Image 1 text is cut off. There's a quote author listed at the bottom but it seems the spacing is bringing it down too far off or that text is not header linked. Thanks so much! Edited February 16, 2021 by SouthernSunEvents Link to comment
studiodelphine Posted February 16, 2021 Share Posted February 16, 2021 On 1/17/2021 at 9:31 PM, tuanphan said: Which banner Can you take a screenshot? Screen shots are below Link to comment
tuanphan Posted February 18, 2021 Share Posted February 18, 2021 On 2/15/2021 at 11:12 PM, SouthernSunEvents said: Hey @tuanphan, Thanks for looking into this. I made some progress on Saturday but now have the following issues: - Image 1 parallax is disabled while the other 2 images are active. I used the code found thinking it would disable all because I read it's easier to manage overlay text this way but for some reason it's just disabling the first image. I'd like to keep all parallax enabled if possible but at this point just looking for the simplest solution. - Text under image 1 is overlapping. Working on trying to figure this out right now. Seeing this is header 2 font and I need this section it different from the others. Same problem with images. All header 1 font but each photo requires different size fonts. Not sure where to go from here. - Image 1 text is cut off. There's a quote author listed at the bottom but it seems the spacing is bringing it down too far off or that text is not header linked. Thanks so much! Which code did you use? On 2/16/2021 at 3:13 PM, studiodelphine said: Screen shots are below Can you share url? Topic has too many comments and I cannot remember each person's site 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
SouthernSunEvents Posted February 18, 2021 Share Posted February 18, 2021 (edited) 3 hours ago, tuanphan said: Which code did you use? Can you share url? Topic has too many comments and I cannot remember each person's site url. So sorry. I'm still getting the hang of this forum stuff. Site: www.southernsunevents.com Password: sse2020 Code I used for header fonts (in Design-Custom CSS): @media screen and (max-width: 640px) { h1 { font-size: 25px; } h2 { font-size: 30px; } h3 { font-size: 15px; } } Code used for banner image resizing/parallax (in Home-Advanced): <style> .Header-branding { display: block; max-width: 100%; max-height: 300px; content: url("https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601967383a680b21c6600059/1612277561071/logo+1+in+white+text++-01.png") !important; /* if logo needs to be centered */ margin-left: auto; margin-right: auto; } </style> <style> @media screen and (max-width:640px) { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { transform: unset !important; } section#about-intro { min-height: unset !important; height: 250px; } } </style> <style> @media screen and (max-width:640px) { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { transform: unset !important; } section#explore-our-work { min-height: unset !important; height: 250px; } } </style> <style> @media screen and (max-width:640px) { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { transform: unset !important; } section#quote { min-height: unset !important; height: 250px; } } </style> Edited February 18, 2021 by SouthernSunEvents Link to comment
SouthernSunEvents Posted February 23, 2021 Share Posted February 23, 2021 On 2/18/2021 at 1:01 PM, SouthernSunEvents said: So sorry. I'm still getting the hang of this forum stuff. Site: www.southernsunevents.com Password: sse2020 Code I used for header fonts (in Design-Custom CSS): @media screen and (max-width: 640px) { h1 { font-size: 25px; } h2 { font-size: 30px; } h3 { font-size: 15px; } } Code used for banner image resizing/parallax (in Home-Advanced): <style> .Header-branding { display: block; max-width: 100%; max-height: 300px; content: url("https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601967383a680b21c6600059/1612277561071/logo+1+in+white+text++-01.png") !important; /* if logo needs to be centered */ margin-left: auto; margin-right: auto; } </style> <style> @media screen and (max-width:640px) { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { transform: unset !important; } section#about-intro { min-height: unset !important; height: 250px; } } </style> <style> @media screen and (max-width:640px) { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { transform: unset !important; } section#explore-our-work { min-height: unset !important; height: 250px; } } </style> <style> @media screen and (max-width:640px) { .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } .Parallax-item:first-child figure { transform: unset !important; } section#quote { min-height: unset !important; height: 250px; } } </style> Hi @tuanphan, Just wanted to check to see if you were able to access my site as I've had a few problems with password access over the last week. It seems to be working ok for now? Thanks so much, Tatiana Link to comment
hilaryparr Posted February 26, 2021 Share Posted February 26, 2021 On 2/3/2021 at 12:53 AM, tuanphan said: Hi. You mean slider? Add to Design > Custom CSS /* resize mobile slide */ @media screen and (max-width:767px) { body.homepage .gallery-fullscreen-slideshow { height: 35vh !important; } } Oh my goodness, thank you! This fixed our main page slider but it didn't fix the pages sliders. Is there something else I need to do to fix all those? Examples: bbcnorman.com/children bbcnorman.com/students Link to comment
tuanphan Posted March 2, 2021 Share Posted March 2, 2021 On 2/26/2021 at 10:51 PM, hilaryparr said: Oh my goodness, thank you! This fixed our main page slider but it didn't fix the pages sliders. Is there something else I need to do to fix all those? Examples: bbcnorman.com/children bbcnorman.com/students Try new code /* resize mobile slide */ @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 35vh !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
tuanphan Posted March 2, 2021 Share Posted March 2, 2021 On 2/23/2021 at 10:48 PM, SouthernSunEvents said: Hi @tuanphan, Just wanted to check to see if you were able to access my site as I've had a few problems with password access over the last week. It seems to be working ok for now? Thanks so much, Tatiana Hi. 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
SouthernSunEvents Posted March 2, 2021 Share Posted March 2, 2021 (edited) 12 hours ago, tuanphan said: Hi. Have you solved it yet? @tuanphanI think I've figured our the banner image resizing with the code listed below but now when I try to adjust text large sections get greyed out and banner images get cut/rearranged. Any ideas? Here's a before shot: And after: Site: www.southernsunevents.com Password: sse2020 @media screen and (max-width: 640px) { .Parallax-item:nth-child(1) .Index-page-image { background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e61166c9f9a545c228981fa/1613063589855/82.N%26N-416_id109374907.jpg?format=2500w'); background-position: 48% bottom; background-repeat: no-repeat; background-size: 125%; } .Parallax-item:nth-child(1) .Index-page-image img { display: none; } } @media screen and (max-width: 640px) { .Parallax-item:nth-child(2) .Index-page-image { background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601d80b87affa87cb4212442/1614193166900/Jenni+Chandler+Photog+1.jpg?format=1500w'); background-position: 48% bottom; background-repeat: no-repeat; background-size: 125%; } .Parallax-item:nth-child(2) .Index-page-image img { display: none; } } @media screen and (max-width: 640px) { .Parallax-item:nth-child(3) .Index-page-image { background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e6116f73d879f7082676743/1609349400689/BLAIRSVILLE_GEORGIA_WEDDING_MEGAN%26KYLEDSC_7045.jpg?format=1500w'); background-position: 48% bottom; background-repeat: no-repeat; background-size: 125%; } .Parallax-item:nth-child(3) .Index-page-image img { display: none; } } Edited March 2, 2021 by SouthernSunEvents Link to comment
NTIyou Posted March 5, 2021 Share Posted March 5, 2021 Hi. Can someone please assist on how to resize banner image for mobile site. A lot of codes have been shared and I don't know which to use. Site is www.NTIyou.com and screenshot attached. Thank you! Link to comment
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 On 3/6/2021 at 1:09 AM, NTIyou said: Hi. Can someone please assist on how to resize banner image for mobile site. A lot of codes have been shared and I don't know which to use. Site is www.NTIyou.com and screenshot attached. Thank you! Hi. Looks fine here. Did you solve this? 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
hello2021 Posted April 7, 2021 Share Posted April 7, 2021 (edited) Site URL: https://www.garryrichardstud.com/hillstar-1 Hi there, @tuanphan I see you have been very helpful to all other comments in this thread and was wondering if you could help me. The banner image on my website looks great on desktop view, but it gets majorly cropped when I view it on mobile (see below). Any tips on why this is happening, and how resolve it? As the majority of our users will be coming to the site on mobile, it is important to have this image displaying correctly? Thanks Edited April 7, 2021 by hello2021 Link to comment
BAA Posted April 7, 2021 Share Posted April 7, 2021 Hi @tuanphan I'm having the same issue. Text on my banners is cutoff and won't resize on mobile. Tried using your code above and doesn't seem to be working. Using 7.1. Website is edgecatering.ca. Link to comment
Nipper Posted April 8, 2021 Share Posted April 8, 2021 Having the same issue, codes above don't seem to be aligning with me. @tuanphan do you have any suggestions? Thanks https://raspberry-coyote-6gss.squarespace.com/config/design 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