Hide Section On Mobile

Site URL: https://iris-bugle-4zwc.squarespace.com

Hi, 

Just need to know how to hide a section on mobile. Getting errors when I use this code:

@media screen and (max-width:640px) {
section[data-section-id=“MY-ID_HERE”] {
display: none;}
}

Do you know how to find out the actual section ID? Are you putting that code in verbatim or did you remove the actual section ID just to post here?

I don't get an error when I use an actual section ID

@media screen and (max-width:640px) {
section[data-section-id="62d7891f8827696c83125768"] {
display: none;
  }
}

On 7/21/2022 at 9:47 PM, ColinB said:

Do you know how to find out the actual section ID? Are you putting that code in verbatim or did you remove the actual section ID just to post here?

I don't get an error when I use an actual section ID

@media screen and (max-width:640px) {
section[data-section-id="62d7891f8827696c83125768"] {
display: none;
  }
}

 

Hi, Colin.

Any Idea why when I use this the top of the section underneath is placed behind the header?

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

Password is 1234567890

On 11/16/2022 at 11:22 PM, SteveBarrett said:

Hi, Colin.

Any Idea why when I use this the top of the section underneath is placed behind the header?

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

Password is 1234567890

Did you solve it? I don't see that section on mobile

On 11/21/2022 at 12:10 PM, tuanphan said:

Did you solve it? I don't see that section on mobile

No, I used a different solution.

Do you know why it was happening?

I used:

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

{
  section[data-section-id="6374fc7c5a0ed22b244cbaa0"]

{
    padding-top: 7rem;
  }
}

However, this is not ideal.

On 11/23/2022 at 2:43 AM, SteveBarrett said:

I used:

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

{
  section[data-section-id="6374fc7c5a0ed22b244cbaa0"]

{
    padding-top: 7rem;
  }
}

 

However, this is not ideal.

Try remove this code from CSS

@media only screen and (max-width: 767px) {
    [data-section-id="6374d4e20d95df3bbbd8fab4"] {
        display: none;
    }
}

On 11/25/2022 at 8:54 AM, tuanphan said:

Try remove this code from CSS

@media only screen and (max-width: 767px) {
    [data-section-id="6374d4e20d95df3bbbd8fab4"] {
        display: none;
    }
}

 

Hi, Tuan.

That defeats the purpose of what I am trying to do.

I want to hide and display certain sections on mobile.

The code you said to remove is what I want to hide on screens 766px and lower.

The reason being is that the fluid editor has spacing issues on mobile screens, so I used the old editor for screens 766px and lower.

See screenshot of the spacing issues between the button and image in the fluid editor on small screen sizes.

Also, see screenshot of NO spacing issues between the button and image using the old editor (however, there are spacing issues above the headline, which I was initially trying to solve)