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

Please can you help confirm my code is correct to Hide a Section on Mobile/Tablet only?


scholarsayze

Question

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

Hello, I am currently using this code to hide a section so it appears on mobile and tablet only (hidden from Desktop):

 

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

[data-section-id="ENTER DATA SECTION ID HERE"] {

   display: none;}}

I am also using this code to hide a section so it appears on desktop only (hidden from Mobile and Tablet):

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

[data-section-id="5ef4c07482b8e941cd5ebc10"] {

    display: none;

}

}

I am aware however that most tablets and some phones now have higher screen resolution. So is this the best reliable way to do this? Or is there a better code?

My objective, I am trying to have two sets of code:

1 - to hide a section from mobile and tablet so it appears on DESKTOP ONLY

2 - to hide a section from desktop so it appears on MOBILE AND DESKTOP ONLY

 

Please can you help confirm this is ok?

 

Site url = https://bluebird-porcupine-yzdg.squarespace.com/

Pword = bluebird

Many thanks.

Best,

Faiz

 

Link to comment

2 answers to this question

Recommended Posts

  • 0
1 hour ago, scholarsayze said:

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

Hello, I am currently using this code to hide a section so it appears on mobile and tablet only (hidden from Desktop):

 

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

[data-section-id="ENTER DATA SECTION ID HERE"] {

   display: none;}}

I am also using this code to hide a section so it appears on desktop only (hidden from Mobile and Tablet):

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

[data-section-id="5ef4c07482b8e941cd5ebc10"] {

    display: none;

}

}

I am aware however that most tablets and some phones now have higher screen resolution. So is this the best reliable way to do this? Or is there a better code?

My objective, I am trying to have two sets of code:

1 - to hide a section from mobile and tablet so it appears on DESKTOP ONLY

2 - to hide a section from desktop so it appears on MOBILE AND DESKTOP ONLY

 

Please can you help confirm this is ok?

 

Site url = https://bluebird-porcupine-yzdg.squarespace.com/

Pword = bluebird

Many thanks.

Best,

Faiz

 

Code is fine I think

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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