Jump to content

Is it possible to Have Two Different Style of One Page, 1 Version for Desktop, the other for Tablet and Mobile?

Recommended Posts

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/collection

Hello,

I have a page here: https://bluebird-porcupine-yzdg.squarespace.com/collection which looks good on Desktop, Tablet and Mobile however, I seem to be having some spacing issue's between each section...looks good on Desktop but not so much on Tablet and Mobile.

Is it possible that I could have two different 'Collection' pages on my site, 1) for desktop and 2) for tablet and mobile and depending on the screen size, the viewer would see either the page suitable for Desktop or of Tablet/Mobile? The other page would just be hidden.

Page = https://bluebird-porcupine-yzdg.squarespace.com/collection

Pword = bluebird

Please advise,

Many thanks,

Best,

Faiz

Link to comment

Yes. You can add more sections on current page. Then let me know, we will give code to hide some sections on desktop, some on mobile.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Thanks Tuanphan,

I have created different section versions for mobile / desktop on this page here: https://bluebird-porcupine-yzdg.squarespace.com/collection

I also have some example of code I am using:

/* HOME - HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE */

@media only screen and ( max-width: 767px ) {

  body:not( .sqs-edit-mode ) section[data-section-id="5fff1e1e7f507d702792c87b"] {
  
    display: none;
    
    }
    
  body.sqs-edit-mode section[data-section-id="5fff1e1e7f507d702792c87b"] {
  
    opacity: 0.5;
    
    }
  }

/* HOME - HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE */

@media only screen and ( min-width: 768px ) {

  body:not( .sqs-edit-mode ) section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {
  
    display: none;
    
    }
    
  body.sqs-edit-mode section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {
  
    opacity: 0.5;
    
    }
  }
 

However, what I feel would be better for me is if I create two different pages, one for Desktop, the other for Tablet and Mobile.

I was hoping for some code to only show 'collection page 1' on desktop and 'collection page 2' on tablet/mobile (page links below).

Is this possible?

Page for desktop = https://bluebird-porcupine-yzdg.squarespace.com/collection

Page for tablet / mobile = https://bluebird-porcupine-yzdg.squarespace.com/collection-2-1

Pword = bluebird

Many thanks,

Best,

Faiz

Link to comment

Hello, the page link has been updated as below.

I have added the 3 header sections designed for different size displays. On tablet and mobile, there will be some different promotional content for my customers.

Is it possible to show:

Header Section 1 on desktop only

Header Section 2 on tablet only

Header Section 3 on mobile only

Please help!

Page = https://bluebird-porcupine-yzdg.squarespace.com/desktop

Pword = bluebird

Many thanks,

Best,

Faiz

Link to comment
On 1/20/2021 at 2:23 AM, scholarsayze said:

Hello, the page link has been updated as below.

I have added the 3 header sections designed for different size displays. On tablet and mobile, there will be some different promotional content for my customers.

Is it possible to show:

Header Section 1 on desktop only

Header Section 2 on tablet only

Header Section 3 on mobile only

Please help!

Page = https://bluebird-porcupine-yzdg.squarespace.com/desktop

Pword = bluebird

Many thanks,

Best,

Faiz

I see a lot of sections here.. Where is section 1, 2, 3...

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/24/2021 at 4:02 PM, scholarsayze said:

I apologise, I have been uploading various designs to see how they look on different devices.

Now changed, the first three sections = 1, 2 and 3.

Many thanks!

Hi. Sorry for the delay. I was off some day.


Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.