paul2009 Posted January 19, 2021 Share Posted January 19, 2021 25 minutes ago, scholarsayze said: Please can you double check I have implemented the code correctly? It shouldn’t be: window.location = "/https://www.scholarsayze.com/mobile"; it should be: window.location = "/mobile"; Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
scholarsayze Posted January 19, 2021 Share Posted January 19, 2021 Thanks very much Paul, apologies for the misunderstanding I'm new to this. Is there anyway to physically see this switch on my desktop screen? I can see this works now on my mobile but if I resize my desktop browser say to 640px, why can't I see the change in my browser (see attached images)? Many thanks, Best, Faiz Link to comment
tuanphan Posted January 20, 2021 Share Posted January 20, 2021 On 1/19/2021 at 5:07 PM, scholarsayze said: Thanks very much Paul, apologies for the misunderstanding I'm new to this. Is there anyway to physically see this switch on my desktop screen? I can see this works now on my mobile but if I resize my desktop browser say to 640px, why can't I see the change in my browser (see attached images)? Many thanks, Best, Faiz After resized to 640px you need to reload your site to code load again. 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
scholarsayze Posted January 20, 2021 Share Posted January 20, 2021 OK thanks Tuanphan I get it now! 💗 Link to comment
Vallis Posted March 14, 2022 Share Posted March 14, 2022 Hi, I am still struggling to make this work in normal CSS since i have the personal plan. It doesn't seem to work when using this code: I wish to have this page, shown when visiting the site on mobile: /https://www.madsdresling.com/mobile_homepage I hope you can help. 🙂 Link to comment
tuanphan Posted March 15, 2022 Share Posted March 15, 2022 16 hours ago, Vallis said: Hi, I am still struggling to make this work in normal CSS since i have the personal plan. It doesn't seem to work when using this code: I wish to have this page, shown when visiting the site on mobile: /https://www.madsdresling.com/mobile_homepage I hope you can help. 🙂 Personal Plan doesn't support JavaScript code. The only way is set some sections for desktop, some sections for mobile on same page, then give page url, we will give the code to hide some on desktop, hide another on mobile 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
Vallis Posted March 15, 2022 Share Posted March 15, 2022 Hi Tuanphan, Thanks a lot for this. 🙂 Here is the url I wish to be seen on desktop: https://www.madsdresling.com/desktophomepage Here is the url I wish to be seen on mobile: https://www.madsdresling.com/mobilehomepage All the best // Mads Link to comment
Vallis Posted March 15, 2022 Share Posted March 15, 2022 Hi Tuanphan, I kind solved it with this: @media (max-width:640px){#desktophomepage2{display:none!important}} @media (min-width:640px){#mobilehomepage2{display:none!important}} However, when implementing the code, the page is not aligned as it should be, and is scrollable. How do I make this page https://www.madsdresling.com/homepage be like this page: https://www.madsdresling.com/ Link to comment
tuanphan Posted March 16, 2022 Share Posted March 16, 2022 14 hours ago, Vallis said: Hi Tuanphan, I kind solved it with this: @media (max-width:640px){#desktophomepage2{display:none!important}} @media (min-width:640px){#mobilehomepage2{display:none!important}} However, when implementing the code, the page is not aligned as it should be, and is scrollable. How do I make this page https://www.madsdresling.com/homepage be like this page: https://www.madsdresling.com/ I see both pages are the same? 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
Vallis Posted March 16, 2022 Share Posted March 16, 2022 Correct, However, one of them is an index page where the code above have been injected in CSS, effectively hiding one page from the index page from the desktop user and one from the mobile user. Problem is that the user can scroll on the index page, which I don't want. On the page https://www.madsdresling.com/desktophomepage its fixed. Ps. Sorry about them being the same, I sendt the wrong link. Link to comment
tuanphan Posted March 18, 2022 Share Posted March 18, 2022 On 3/16/2022 at 5:45 PM, Vallis said: Correct, However, one of them is an index page where the code above have been injected in CSS, effectively hiding one page from the index page from the desktop user and one from the mobile user. Problem is that the user can scroll on the index page, which I don't want. On the page https://www.madsdresling.com/desktophomepage its fixed. Ps. Sorry about them being the same, I sendt the wrong link. To disable scroll, you can add this code to Index Page Header <style> html, body {overflow:hidden;} </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
AdamMeow Posted April 7, 2022 Share Posted April 7, 2022 Hey gang, Ive been trying to follow along with this code injection. And it seems pretty simple, but I just cant seem to get it to work! I do have code on my site to make a full screen slideshow when you open the page and maybe that is messing something up with this other script. The slideshow doesn't look good on mobile, so ideally I would like to use this technique to send user to a duplicate of this page, but just one with a different gallery that looks better. I am injecting the code in the page settings as instructed above. Can someone help me with this? What am I missing? url https://fish-mackerel-y6sc.squarespace.com/adam-meow-design-studio mobile https://fish-mackerel-y6sc.squarespace.com/mobile Below is the code that is currently on my site Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 On 4/7/2022 at 8:14 AM, AdamMeow said: Hey gang, Ive been trying to follow along with this code injection. And it seems pretty simple, but I just cant seem to get it to work! I do have code on my site to make a full screen slideshow when you open the page and maybe that is messing something up with this other script. The slideshow doesn't look good on mobile, so ideally I would like to use this technique to send user to a duplicate of this page, but just one with a different gallery that looks better. I am injecting the code in the page settings as instructed above. Can someone help me with this? What am I missing? url https://fish-mackerel-y6sc.squarespace.com/adam-meow-design-studio mobile https://fish-mackerel-y6sc.squarespace.com/mobile Below is the code that is currently on my site Can you paste all code after adding Paul2009 code? I Don't see code in your screenshot Also you can consider adding 2 sections, then we can give code to show 1 on desktop, show another on mobile 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
paul2009 Posted April 10, 2022 Share Posted April 10, 2022 56 minutes ago, tuanphan said: Can you paste all code after adding Paul2009 code? Please don't post actual code as this may infringe copyright. If you are using someone's code, please post a link to where you found it, rather than posting the actual code. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
paul2009 Posted April 10, 2022 Share Posted April 10, 2022 On 4/7/2022 at 2:14 AM, AdamMeow said: I've been trying to follow along with this code injection [to show different content on a mobile device] and it seems pretty simple, but I just can't seem to get it to work! This thread refers to Squarespace 7.0 and is therefore unlikely to be the best solution for your Squarespace 7.1 site. However, it should work if you: Add the code to the Page Header Code Injection Place it in "script" tags Are on a business plan or above. I looked at the /adam-meow-design-studio page but I couldn't see the script there. As Tuan mentioned above, a better way to achieve this on Squarespace 7.1 may be to add two sections - one for desktop and one for mobile - and then add Custom CSS to show/hide the respective section according to the width. One benefit is that this can be achieved without script on personal plans. The downside of having two image heavy sections is that both must be loaded, even though one will be hidden. This will potentially slow down the page load time and increase data use for mobile users. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
jakesandersworks Posted May 5, 2022 Share Posted May 5, 2022 (edited) I tried to use this code to redirect my homepage on mobile. It worked initially but when I came back the next day and tried to go to my site on on my phone and it was just infinitely loading. The site works fine on desktop but I'm not sure why it isn't working on mobile. Here is the link: jakesandersworks.com . I have a business plan and copied the exact code into the advanced section of the homepage settings so I'm not sure why it's not working. Edited May 5, 2022 by jakesandersworks Link to comment
creedon Posted May 5, 2022 Share Posted May 5, 2022 (edited) On 5/5/2022 at 1:00 PM, jakesandersworks said: but when I came back the next day and tried to go to my site on on my phone and it was just infinitely loading. I just visited your site on my iPhone and did not experience infinite loading. Could this be an issue of you being logged into the site? Were you logged in on your cell phone? Edited August 20 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
jakesandersworks Posted May 6, 2022 Share Posted May 6, 2022 21 hours ago, creedon said: I just visited your site on my iPhone and did not experience infinite loading. Could this be an issue of you being logged into the site? Where you logged in on your cell phone? Don't know if I was logged in or not but cleared my caches on my mobile browser and now works fine. Thank you for checking! creedon 1 Link to comment
House_of_JJD Posted June 3, 2022 Share Posted June 3, 2022 Hi everyone, I've followed the instructions to do all of this & have successfully managed to redirect mobile devices to a "/mobile" landing page, with a separate bespoke portrait H264 video link from Vimeo, but the video STILL won't actually play on about 30% of the mobiles I've tried it on. Are there any specifically more reliable video settings/resolution/dimensions that you can recommend to output at to optimise the video to play on as many devices as possible - it really is SO infuriating! The website is mieville.ca & the link to the portrait video on Vimeo that should be playing is: https://vimeo.com/716807821 Any recommendations/advice very gratefully received. Many thanks in advance, Julien Link to comment
Andrew0502 Posted July 20, 2023 Share Posted July 20, 2023 Hi On 4/10/2022 at 3:04 PM, paul2009 said: This thread refers to Squarespace 7.0 and is therefore unlikely to be the best solution for your Squarespace 7.1 site. However, it should work if you: Add the code to the Page Header Code Injection Place it in "script" tags Are on a business plan or above. I looked at the /adam-meow-design-studio page but I couldn't see the script there. As Tuan mentioned above, a better way to achieve this on Squarespace 7.1 may be to add two sections - one for desktop and one for mobile - and then add Custom CSS to show/hide the respective section according to the width. One benefit is that this can be achieved without script on personal plans. The downside of having two image heavy sections is that both must be loaded, even though one will be hidden. This will potentially slow down the page load time and increase data use for mobile users. I'm trying to design two alternate homepages one for desktop and one for mobile on 7.1 Apologies for my ignorance but can you advise me what I would need to make this work Link to comment
tuanphan Posted July 22, 2023 Share Posted July 22, 2023 On 7/21/2023 at 5:54 AM, Andrew0502 said: Hi I'm trying to design two alternate homepages one for desktop and one for mobile on 7.1 Apologies for my ignorance but can you advise me what I would need to make this work You can design 2 pages, then share link to desktop page, we can give code to redirect to mobile page when users on mobile 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
Naoms Posted May 29 Share Posted May 29 On 12/29/2020 at 12:55 PM, paul2009 said: @Tomz it appears that you have added the code to the site's Header Injection instead of the homepage's Header Injection area. To clarify, the code should not be added to Settings > Advanced > Code Injection > Header. Instead, go to the Pages panel, and then find the site's homepage (not homepagem). Click the Settings [gear] icon beside the homepage name. When the Page Settings panel loads, click Advanced and you'll see a code injection area specific to this page. If a post helps you, please click a "Like" option below ↘️ Hi Paul, Thank you for the code. I've added the code to the page injection and the page appears on mobile too. However, when i press on the text linked to event pages - it keeps going back to the mobile home page. does not go beyond to anything else 😕 https://laf-uk.squarespace.com/ I'm doing a seperate homepage in the first place because the website kept crashing only for iphone users and decided to make a seperate simpler one for mobile. Thank you! Link to comment
naayb Posted August 20 Share Posted August 20 Hi! After adding the code, the page is blank... I've also set the URL to .../mobile Tips! Thanks Link to comment
tuanphan Posted August 23 Share Posted August 23 On 8/20/2024 at 8:23 PM, naayb said: Hi! After adding the code, the page is blank... I've also set the URL to .../mobile Tips! Thanks You should add code to "Home" page, instead of "Homepage Mobile" page If it still doesn't work, you can keep code + share link to "Home" page, we can check problem 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment