Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • 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:

 

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

Link to post

Thanks for that. I had already come across this post but I don't have a business plan and my version doesn't seem to let me add code to that section. Is there another way of implementing it?

Link to post

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.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include™, including a range of Squarespace extensions.
I value honesty, integrity, transparency and respect.
Links in my posts may refer to SF Digital products or may be affiliate links.

Link to post

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 post

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 post

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 post

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 post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...