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

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

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.

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

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

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

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!

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?

No problem at all! No need to apologise.

Yes please, if you can offer some help that will be great. I took the page off but I have now added back to the Main Navigation. I have also clearly marked the three banners for desktop, tablet and mobile.

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

Pword = bluebird

Thank you.