Jump to content

CSS for hiding and revealing sections on mobile

Recommended Posts

Hi everyone.

 

I am trying to hide and reveal certain sections on mobile.

 

I used this code to do so:

 

@media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}}
@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

 

However, when I try this with my hero section, the section that I want to reveal on mobile gets placed behind the header on mobile screens.

 

Any idea how to fix this?

 

https://semicircle-nectarine-t42g.squarespace.com/home-copy

 

1234567890

 

Thanks in advance.

 

Steve

Screenshot 2022-11-16 at 17.00.54.png

Screenshot 2022-11-16 at 17.00.43.png

Link to comment
21 hours ago, SteveBarrett said:

Hi everyone.

 

I am trying to hide and reveal certain sections on mobile.

 

I used this code to do so:

 

@media only screen and(min-width:641px) {[mobile-data-section-id]{display:none}}
@media only screen and (max-width:640px) {[desktop-data-section-id]{display:none}}

 

However, when I try this with my hero section, the section that I want to reveal on mobile gets placed behind the header on mobile screens.

 

Any idea how to fix this?

 

https://semicircle-nectarine-t42g.squarespace.com/home-copy

 

1234567890

 

Thanks in advance.

 

Steve

Screenshot 2022-11-16 at 17.00.54.png

Screenshot 2022-11-16 at 17.00.43.png

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="6374fc7c5a0ed22b244cbaa0"] {
    padding-top: 89.6406px;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

Greeting, it's 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, Keyword Highlighter
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

My testing

image.thumb.png.c75e69cffa1a106c6ecbd3044d76cb85.png

Greeting, it's 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, Keyword Highlighter
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...

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.