CSS for hiding and revealing sections on mobile

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

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

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

My testing

Thanks @Beyondspace, that worked a treat.

Why 89.6406px?

Is it the standard padding that Squarespace use?