Can I set my homepage to a different page for mobile only

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";

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

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.

OK thanks Tuanphan I get it now! 💗

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. 🙂

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

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

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/

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?

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. 

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>

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

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

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.

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.

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. 

2 hours ago, 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? Where you logged in on your cell phone?

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!

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

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

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