Alternate Homepage for Mobile?

Site URL: https://halibut-finch-9bdl.squarespace.com/

Site Password: ghosts

I have a website I'm working on and while the home page looks great on desktop, I'd love to create a different page to use as the home page on mobile only. 

This is my home page

https://halibut-finch-9bdl.squarespace.com/

And this is the page I'd like to use as the home page on mobile specifically. 

https://halibut-finch-9bdl.squarespace.com/home-2

Any help would be greatly appreciated! Thanks

Also, I've tried the code below, and keep getting a syntax error when I try putting in the URL. 

@media (max-width:640px){#your-desktop-page-URL {display:none!important}}

@media (min-width:640px){#your-mobile-page-URL{display:none!important}}

If you use Business Plan, you can add JS code to redirect to new mobile page on mobile

If you use Personal Plan, you can add more sections on current page, then use CSS to show these sections on mobile only & hide above sections.

@tuanphan

Hi there! Running into the same issue. Website homepage is https://www.lindseysimcik.co/ but would love for the mobile homepage to be https://www.lindseysimcik.co/mobile! Let me know if you can help. Have tried all the code above but still sticky 😕 

On 3/1/2021 at 8:28 AM, mg1995 said:

@tuanphan

Hi there! Running into the same issue. Website homepage is https://www.lindseysimcik.co/ but would love for the mobile homepage to be https://www.lindseysimcik.co/mobile! Let me know if you can help. Have tried all the code above but still sticky 😕 

Add to Homepage Header

<script type="text/javascript">
<!--
if (screen.width <= 640) {
document.location = "/mobile";
}
//-->
</script>

On 3/3/2021 at 3:01 AM, tuanphan said:

Add to Homepage Header

<script type="text/javascript">
<!--
if (screen.width <= 640) {
document.location = "/mobile";
}
//-->
</script>

 

Is this script supposed to work on all templates? It's not working on Brine. I'm trying to show "/landing-banner" on large screens and "/landing-banner-mobile" on mobile. Thanks. 

I also tried this CSS with different widths but no dice 😞

@media only screen and (max-width: 2388) {#landing-banner
{display: none;}
} 
@media only screen and (min-width: 2389) {#landing-banner-mobile
{display: none;}
}

Resolved

Hi Greg, 
How did you solve this issue? 

I still can't seem to get it right. 

16 hours ago, Vallis said:

Hi Greg, 
How did you solve this issue? 

I still can't seem to get it right. 

 

 

What is your site url?