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

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

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.