Jump to content

Hide Section On Mobile

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

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;
  }
}

 

Link to comment
  • 3 months later...
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

Screenshot 2022-11-16 at 16.21.26.png

Link to comment
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

Screenshot 2022-11-16 at 16.21.26.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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)

Screenshot 2022-11-26 at 11.34.01.png

Screenshot 2022-11-26 at 11.38.26.png

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.