Joeyearthly Posted November 14, 2019 Share Posted November 14, 2019 Hello! So my site is https://earthlycraft.co/ It's almost there... but i cant work one thing out. How to change one of my banner hero images for mobile. It looks great on desktop however its too small on mobile, so i have another logo ready thats zoomed right in that i'd like to use for mobile only. I've added the file in design > custom css > manage custom files so i can use the link to the file I'm fairly familiar with media queries but i don't know the code to change the banner. When I inspect I get this code: .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img Therefore i'm going for something along the lines of: @media only screen and (max-width: 600px) {.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {background image: https://static1.squarespace.com/static/5d00032088447c0001487495/t/5dcdc90c40062f0cf29e9ddc/1573767446853/mobilelogo.png;}} Help would be much appreciated!! Cheers!! Link to comment
Solution christyprice Posted November 14, 2019 Solution Share Posted November 14, 2019 (edited) ETA: If you are on the newer Squarespace 7.1, this post has a walkthrough: How to Show a Different Banner Image on Mobile in Squarespace Hi @Joeyearthly, If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.) /* 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; } } Edited June 13, 2020 by christyprice ajbajb, Tiny_Coast, alchemy and 1 other 3 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
Joeyearthly Posted November 15, 2019 Author Share Posted November 15, 2019 Hey @christyprice Thank you so much for this! Great workaround thats done exactly what I wanted it to! That's some outside the box thinking right there...great stuff! It has presented a bit of a problem though, in that I still don't know how to call the banner image. The container for the image is too darn small and it just cuts off the edges top and bottom of any image I put there....so the bigger zoom image idea isn't working perfectly, yet. If you have any ideas on this code do let me know! So far, without joy, i've tried .sqs-block-html , .sqs-block-image, .sqs-block-html , .sqs-block-markdown blockquote, .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img and I just cant get that container to move. Link to comment
GMDI Posted January 21, 2020 Share Posted January 21, 2020 On 11/14/2019 at 4:03 PM, christyprice said: If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.) /* 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; } } @christyprice This sounds like an elegant solution. Do you have any troubleshooting advice? The code doesn't seem to affect my index sections, both remain visible. My site is igcalgary.com but I currently have the mobile only section unlinked, it's not live on my homepage. Thanks for your help. tea2204 1 Link to comment
justinpheap.co Posted February 6, 2020 Share Posted February 6, 2020 @christyprice I love this solution and arrived at something similar for my sites, too. One problem I am running into is essentially the use of Relative Links in the nav menu. So, for example, when users arrive at my site (www.mitchbakker.com) via mobile, they landing page, url slug /home-mobile, is great –but then the primary nav links still point to the url slug /home. So, the user naturally clicks to go "home" at some point, and then they are met with the desktop version of /home. Any thoughts on how to provide a solution? Link to comment
christyprice Posted February 6, 2020 Share Posted February 6, 2020 @justinpheap.co, I use index pages and just hide/show the subpages, so the page URL stays the same. christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
justinpheap.co Posted February 6, 2020 Share Posted February 6, 2020 30 minutes ago, christyprice said: @justinpheap.co, I use index pages and just hide/show the subpages, so the page URL stays the same. Thanks for the quick reply, @christyprice! So, I am currently setup with two separate Index Pages (screenshot). Is this what you recommend with your code –adding it to the overall CSS, then? Thanks again 🙂 Link to comment
christyprice Posted February 6, 2020 Share Posted February 6, 2020 @justinpheap.co I use one Home index page. Within that index I have one subpage for desktop view and one subpage for mobile that I show/hide with the code above. justinpheap.co 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
justinpheap.co Posted February 6, 2020 Share Posted February 6, 2020 @christyprice –that's a much more efficient and effective way than I was going about it. Thank you so much! christyprice 1 Link to comment
BRepairers Posted February 19, 2020 Share Posted February 19, 2020 @christyprice so I implemented your code and created the subpage for mobile view, and it works perfectly EXCEPT for some reason, my Squarespace site is now taking the small mobile images (250 pixels wide) and still stretching them so now I have pixelated images stretched farther than the width of my mobile screen (as opposed to high-resolution, desktop size images stretched farther than my mobile screen, see screenshot attached). Help! What is wrong? How do I fix this so it stops stretching the images beyond the width of the mobile screen??? I've tried everything I can find online to do, and I just can't seem to get Squarespace to resize images for mobile correctly! Test site: https://rhino-dogfish-zyb7.squarespace.com/ Password: Bishop Thanks 🙏 Link to comment
christyprice Posted February 19, 2020 Share Posted February 19, 2020 (edited) @BRepairers, it's hard to know without seeing your code and images. It might be an issue with the mobile breakpoints. Double check those. Edited February 19, 2020 by christyprice christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
camilla.ciappina Posted February 19, 2020 Share Posted February 19, 2020 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
christyprice Posted February 19, 2020 Share Posted February 19, 2020 @camilla.ciappina, As with the site above, you’d likely need to have someone log in as an admin to check your code and your images. christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
camilla.ciappina Posted February 19, 2020 Share Posted February 19, 2020 3 minutes ago, christyprice said: @camilla.ciappina, As with the site above, you’d likely need to have someone log in as an admin to check your code and your images. @christyprice if I provide you if access, would you be able to guide me? or I can send the images and screenshot of the code I did for you to review.. thank you so much! Link to comment
christyprice Posted February 19, 2020 Share Posted February 19, 2020 @camilla.ciappina - sent you a DM. christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
underscore Posted February 19, 2020 Share Posted February 19, 2020 @camilla.ciappina I am having issues on our fallback image not being contained and stretching out on Mobile also in addition to the other banner images. do you have any solutions. I can give you a login. Link to comment
Guest Posted May 2, 2020 Share Posted May 2, 2020 On 11/14/2019 at 11:03 PM, christyprice said: Hi @Joeyearthly, If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.) /* 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; } } Hi Christy, Would this work on 7.1? I have tried the following, but all it does is hide the fallback image and YouTube video in the banner. //show home page block dependent on screen size @media only screen and (max-width: 780px) { #page-section-5e73cbba33e8127c09e233ba { display: hide; } } @media only screen and (min-width: 781px) { #page-section-5e73cbba33e8127c09e233bc { display: none; } } I can DM you a link and password if required. Help would be much appreciated. Thank you! 🙂 Christine Link to comment
christyprice Posted May 2, 2020 Share Posted May 2, 2020 Hi @equerryconsulting. Unfortunately this solution only works with index pages, so only certain templates in 7.0. I haven’t had to come up with a workaround yet. I’d suggest starting a new thread specific to 7.1 to see if someone can help you out. Best of luck with your website! christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
tuanphan Posted May 25, 2020 Share Posted May 25, 2020 On 5/23/2020 at 4:27 AM, Aesthetic_Collab said: Hello all, I recently implemented the Background Video Plugin from sqspthemes and it works perfectly for a 7.0 Brine site I am designing, however on mobile the video banners won't auto play of course. So I am wondering if I could have a separate mobile index page designed that has video blocks (for users to manually play the videos). Would this concept work for that? Thank you for any advice. Try contacting sqspthemes first, their support is good Aesthetic_Collab 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
christyprice Posted June 9, 2020 Share Posted June 9, 2020 (edited) If you are on 7.1, here are new instructions: How to Show a Different Banner Image on Mobile in Squarespace Edited June 13, 2020 by christyprice The-Design-Order and Aesthetic_Collab 2 christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
eliasbalk Posted July 27, 2020 Share Posted July 27, 2020 Hi @christyprice, thanks a lot for sharing. I am facing a problem when using the code and was hoping you might have a quick workaround? The banners display as wanted on web and mobile, but on mobile my banners jump/zoom-in a little bit at a certain point when scrolling down. (caused by the added CSS) Thanks a lot in advance. Code used: @media only screen and (max-width: 780px) { #home-banner { display: none; } } @media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } } Url: www.cotorra-store.com/hompagetest Link to comment
christyprice Posted July 27, 2020 Share Posted July 27, 2020 Hi @eliasbalk, do you have other custom code on your site? I haven't noticed this issue before, so wondering if you have competing code. If you have other code, I'd remove it and see if this works as expected on its own. christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
eliasbalk Posted July 27, 2020 Share Posted July 27, 2020 Hi @christyprice, thanks for the quick feedback. There is no other CSS active but problem still remains. When i deactivate Parallax though in SiteStyles the problem disappears. Is that usually the case with this feature to use it only without Parallax? Link to comment
christyprice Posted July 27, 2020 Share Posted July 27, 2020 (edited) Ah, gotcha! It does seem to be an issue with parallax. You can turn it off to fix the problem. Here's the general code to turn it off on mobile everywhere. @media only screen and (max-width: 780px) { #home-banner { display: none; } figure { transform: none !important; top: 0 !important; bottom: 0 !important; will-change: auto !important; } } @media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } } To turn off parallax for just that page, you can use the collection-id specific to the page: @media only screen and (max-width: 780px) { #home { display: none; } #collection-5f1c8fa3acc1cf6f0497d570 figure { transform: none !important; top: 0 !important; bottom: 0 !important; will-change: auto !important; } } @media only screen and (min-width: 781px) { #home-1 { display: none; } } Edited July 27, 2020 by christyprice christyprice.com 🇺🇸 Austin, TX US ✅ Get my Starter Template for Web Designers 🎥 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
rwp Posted July 27, 2020 Share Posted July 27, 2020 @eliasbalk Did you get this fixed? I looked at your page, I don't see the zoom issue. 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