Jump to content

Different homepage for mobile only

Recommended Posts

Hi, Because of issues with background video I'd like two homepages, one with a video background (for desktop) and another with a slideshow gallery (for mobile). Is it possible to add some code so that mobile devices jump straight to the gallery homepage? And desktop devices jump straight to the video background homepage?

Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

You can redirect to a different page or hide/show different sections of a single page. See old thread:

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

You can use the "hide/show different sections of a single index page" method. This uses CSS which is supported on a personal plan. It is referenced in the same thread above.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Hi Paul, just wanted to check- is this the hide/show method (below) or have i missed it? 

_______________________________________

" if you are using a template with index pages then this can easily be achieved with just css. Just create two pages within the index, one for mobile and one for desktops.

Then adjust the below code with your page URLs and add it to you websites global CSS."

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

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

 

 
Link to comment

I have the Novo template which has portfolio pages rather than index pages. Are they the same thing? I've tried to set a portfolio page as my homepage and create one page within it called mobile, the other called desktop. I've then put the above code into the design/ css section. This doesn't seem to work

Link to comment

Hi have spent quite a bit of time trying to get this to work. I tried to do it by hiding/showing sections of a page (using block id's) but I'm finding it a bit complicated as I am trying to use background video on desktop and a slideshow gallery on mobile...but I can't seem to get a specific block id for each element (I'm using the google extension Squarespace block identifier), so i have pretty much given up on that route. 

The url option would be much simpler and preferable but i still don't really understand how it works...or rather how you can use it as a home page? If one page is hidden how does it then jump to the next page? Possibly I'm not really getting the whole index page thing as my template only has portfolio pages?

Link to comment

Thanks Paul, sorry i'm new to this! I've set up a test site which explains the issue:

https://horse-tiger-eysr.squarespace.com

password is: homepagetest

normally the homepage(s) would not be visible in the header menu but i've left them in the navigation to make it simple.
ideally there would be two homepages - one which says 'welcome to my website' with a video background (desktop)
another which says 'welcome to my website' with a full bleed slideshow behind (mobile). 

The mobile version doesn't have the text in front because i can't work out how to add text on top of a gallery slideshow!

But hopefully the reason for this is clear... the background video doesn't work on mobiles so the slideshow is a more interesting fallback than a simple still image.

 

Does this make sense?

Thanks

 

ben
 

 

 

Link to comment
  • 5 months later...

Hello, 

I have a website (on a personal account) 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

 

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}}

Any help would be greatly appreciated. Thanks!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.