eliasbalk Posted July 28, 2020 Share Posted July 28, 2020 Hi @christyprice, thanks a lot for your detailed answer. @rwp It does work now beautifully by excluding the parallax effect from the mobile. But i am still trying to figure out a way to have parallax active on mobile as well. Link to comment
rwp Posted July 28, 2020 Share Posted July 28, 2020 Can you enable the parallax so I can look into it? Link to comment
eliasbalk Posted July 28, 2020 Share Posted July 28, 2020 4 minutes ago, rwp said: Can you enable the parallax so I can look into it? Hi @rwp, thanks for taking a look. its enabled now - cotorra-store.com/hompagetest - when scrolling it zooms in. (when accessed via mobile device) Link to comment
rwp Posted July 28, 2020 Share Posted July 28, 2020 This looks like its due to the web address bar hiding as you scroll. The parallax code is setting the image height based on the viewport height. When the address bar goes away, the viewport height gets larger and increases the image size. Link to comment
eliasbalk Posted July 29, 2020 Share Posted July 29, 2020 13 hours ago, rwp said: This looks like its due to the web address bar hiding as you scroll. The parallax code is setting the image height based on the viewport height. When the address bar goes away, the viewport height gets larger and increases the image size. Hi @rwp, thank you for the explanation. That makes sense. Normally that does not happen on mobile with parallax so i am wondering if there might be some CSS which fixes the image height to the first determined height based on the initial viewport height? Any idea? Link to comment
rwp Posted July 29, 2020 Share Posted July 29, 2020 2 hours ago, eliasbalk said: Hi @rwp, thank you for the explanation. That makes sense. Normally that does not happen on mobile with parallax so i am wondering if there might be some CSS which fixes the image height to the first determined height based on the initial viewport height? Any idea? I didn't see anything when I looked. Are you using squarespace's parallax, or a different code? Link to comment
eliasbalk Posted July 29, 2020 Share Posted July 29, 2020 2 hours ago, rwp said: I didn't see anything when I looked. Are you using squarespace's parallax, or a different code? I have the Squarespace Parallax active. No other code. Parallax works great until i use the CSS below. Then i get the zoom-in issue caused by the browser address bar hiding when on a mobile device. /* show home page block dependent on screen size */ @media only screen and (max-width: 780px) { #home-banner { display: none; } } @media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } } Link to comment
rwp Posted July 29, 2020 Share Posted July 29, 2020 Out of curiosity, what happens if you add: #home-banner-mobile {height: 600px !important; } That height won't be correct, I'm just curious if it will stop it from zooming. If it does, I might have a fix. Link to comment
CorinneJ Posted August 17, 2020 Share Posted August 17, 2020 Hi guys, I don't have alot of experience in websites and Im trying to keep it simple. I have the same issue as the original question in this feed. When I uload my banner image on my home page the text (on the banner) is fine on the mobile version but looks huge on the desktop. So I was going to save two versions. I am unable to create index pages on my template or duplicate my homepage as it isn't an option. Does anyone have any ideas as to what I can do ? Link to comment
tuanphan Posted August 17, 2020 Share Posted August 17, 2020 41 minutes ago, CorinneJ said: Hi guys, I don't have alot of experience in websites and Im trying to keep it simple. I have the same issue as the original question in this feed. When I uload my banner image on my home page the text (on the banner) is fine on the mobile version but looks huge on the desktop. So I was going to save two versions. I am unable to create index pages on my template or duplicate my homepage as it isn't an option. Does anyone have any ideas as to what I can do ? Can you share site url? We can check easier. 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
CorinneJ Posted August 17, 2020 Share Posted August 17, 2020 Site URL https://aqua-azalea-9f56.squarespace.com/ Access Password Helpme123 Link to comment
christyprice Posted August 21, 2020 Share Posted August 21, 2020 4 minutes ago, Aesthetic_Collab said: This is epic- I was just trying to figure this out!! Thank you @christyprice Aw, thanks @Aesthetic_Collab! Glad it was helpful! christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
billystar101 Posted September 13, 2020 Share Posted September 13, 2020 On 2/18/2020 at 8:27 PM, camilla.ciappina said: Anyone else have this issue? I need someone to help Hi there! I am trying to do the same with my website but it's not working.. https://ticket-channel.squarespace.com/ Link to comment
tuanphan Posted September 14, 2020 Share Posted September 14, 2020 16 hours ago, billystar101 said: I see fine here. Did you solve? If no, can you describe in more detail? 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
JustinBullseye Posted November 13, 2020 Share Posted November 13, 2020 OMG! Thank You @christyprice!! This solution on your website was SO easy and helped me a ton! https://christyprice.com/squarespace-tips-tricks/show-different-banner-mobile-desktop christyprice 1 Link to comment
christyprice Posted November 13, 2020 Share Posted November 13, 2020 Thanks @JustinBullseye! You made my day. christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
BlackcombHelicopters Posted February 2, 2021 Share Posted February 2, 2021 Hi, I am looking for some help with this. Marquee Template on 7.0 Trying to use a different page for Desktop and Mobile, but none of the code above seems to work: https://blackcombhelicopters.com/ Link to comment
tuanphan Posted February 4, 2021 Share Posted February 4, 2021 On 2/2/2021 at 9:50 AM, BlackcombHelicopters said: Hi, I am looking for some help with this. Marquee Template on 7.0 Trying to use a different page for Desktop and Mobile, but none of the code above seems to work: https://blackcombhelicopters.com/ Hi. You want to use different banner or resize banner on mobile? If resize, we can give the code 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
BlackcombHelicopters Posted February 21, 2021 Share Posted February 21, 2021 We can try the resize code. Thanks. Link to comment
tuanphan Posted February 22, 2021 Share Posted February 22, 2021 13 hours ago, BlackcombHelicopters said: We can try the resize code. Thanks. Add to Design > Custom CSS /* resize mobile home banner */ @media screen and (max-width:640px) { body.homepage #parallax-images div:first-child img { width: 100% !important; top: 0 !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
BlackcombHelicopters Posted February 26, 2021 Share Posted February 26, 2021 Thanks for helping. Unfortunately that won't work as the rest of the banner remains empty while the picture is resized. Link to comment
tuanphan Posted March 2, 2021 Share Posted March 2, 2021 On 2/27/2021 at 4:16 AM, BlackcombHelicopters said: Thanks for helping. Unfortunately that won't work as the rest of the banner remains empty while the picture is resized. Which banner you want to resize? 1 banner or 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
LucyDesigns Posted March 25, 2021 Share Posted March 25, 2021 @christypriceI am using your code on 7.1 but for some reason it is cropping the top of the banner image (section 2) on mobile. I have removed all other code on the site and it's still happening. I test it on a brand new test site and it works well there but on my client's site there's weird cropping happening. Any tips? Link to comment
christyprice Posted March 25, 2021 Share Posted March 25, 2021 @LucyDesigns this happened to me recently too. I added some margin, something like this, and that worked for me: <style> @media only screen and (max-width: 780px) { #page section:nth-of-type(1) { display: none; } #page section:nth-of-type(2) { margin-top: 100px; } } @media only screen and (min-width: 781px) { #page section:nth-of-type(2) { display: none !important; } } </style> christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
LucyDesigns Posted March 25, 2021 Share Posted March 25, 2021 Oh my goodness, amazing! I couldn't work out where to add a margin or some padding but you've solved it for me. Thank you so much, you've solved a real headache! christyprice and tuanphan 2 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