Hiding a page from Mobile View

Site URL: https://www.trustclimateactionstrategists.com/

Hi! I have a video banner playing in it's own page, and I'd like to hide it from mobile view. I don't want a mobile fallback option for it as a header; I want that page containing my video to disappear completely. (I had to do a custom image for the header to properly resize for mobile, so I can't have that be the mobile fallback option). I've tried the following code (below) in my custom CSS section (which already has a bunch of custom CSS in it - please see the screen shot attached). Should I put code in the "Page settings > advanced" section of that page? I'm not sure what to do. Thank you!

@media only screen and (max-width: 768px) {#block-null {display: none;}

}

@media only screen and (max-width: 768px) {#video-header {display: none;}}

Thank you - do you mean add that in the main custom CSS page? It did not seem to work on my phone - it still shows as the black backup to the video banner.

Quote

I want that page containing my video to disappear completely.

When you say you want the page to disappear completely do you mean you want the video to be gone on mobile?

Or, you don't want to page itself inaccessible on mobile?

Hi Creedon, I mean that I want that page itself to be inaccessible on mobile. Right now it appears like this: a blank black section.

@jai's code can work. However there is a syntax error is Design > Custom CSS.

That will need to be fixed before the code can work.

If you post the contents of Design > Custom CSS here we can try to correct the error.

Hi @creedon thank you again - the contents of the custom CSS are below I numbered where they are - the top is all on line 1 (it is for images that I have that change to a different image on hover) and the next is line 2. Is that right.

1. https://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/6058e43110a54f371492cf13/1616438321432/Celebrate+Flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548f88d9fe90a817f6cdb/1616201977355/IRESPECT.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548e799cfb127aebf425c/1616201960231/Your+Footprint.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548f88d9fe90a817f6cdb/1616201977355/IRESPECT.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/6058e2e79a3e3f327d8d7c26/1616437991333/Irespect+Flip+2.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/6058e2e46d105926ce012d88/1616437988509/Calculate+Flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554d060af9103c1f5c4c13/1616203014364/Timeline+Flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554d14d5282308c74e35ec/1616203029750/Timeline.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554d0b4ace0a5fd40a6190/1616203019841/Celebrate+flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554d17ebd7307ae7ebe6ee/1616203033027/Celebrate.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554ceda79fe46cb97af4c1/1616202989165/Toolkit+flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554d1b94da796fd40a3c1d/1616203036193/Toolkit.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554b0965de7848db8eaca2/1616202505541/Your+Plan+Flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554a1085c7966c86660a2d/1616202257053/Your+Plan.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554b03bc125625fc5a122c/1616202499153/Invest+your+values+flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554a0bca24454a7308c706/1616202251810/Invest+your+values.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554afb9d0803023b918b80/1616202491984/Inclusion+flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/60554a0599cfb127aebf5320/1616202246742/Inclusion.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548d939ac75765fbad206/1616201946013/Accountability+Flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548d3552222411afbc8d4/1616201940498/ACCOUNTABILITY.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548e3f331b75f96ffb4ba/1616201956011/Your+Footprint+Flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548e799cfb127aebf425c/1616201960231/Your+Footprint.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548f4fabb522b0f25db78/1616201972411/Irispect+flip.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605548f88d9fe90a817f6cdb/1616201977355/IRESPECT.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605546f2a784e866a381c50d/1616201458463/Day+4.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/605546fe94da796fd409e348/1616201471613/Do+It+Daily-+DID+it!.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e74b6d5db3e4679186436/1615754423357/Teresa+name.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e74cdb746234915a20646/1615754446503/Teresa+song.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e7400e141402d8cc3de82/1615754241376/Chris+song.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e73e03a2cb004c04d1fd7/1615754210000/Chris+name.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e7283b40cb82b3b11236e/1615753860409/Chelsea+song.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e727c8717b1712e0f60e4/1615753853581/Chelsea+name.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e71588e57d50afdd90f67/1615753561526/Diane+song.pnghttps://static1.squarespace.com/static/6047d1e3a92b6c71c1273d53/t/604e6f93f4c3f41874dc0493/1615753107857/Diane+name.png
2. @media only screen and (max-width: 768px) {#video-header {display: none;}}

Those image URLs listed on line 1 are not CSS and should be removed. That is what is causing the syntax error. Is the CSS field not showing you an error message?

Let us know how it goes.

@creedon it worked!!! Thank you for taking the time to respond. I was worried about deleting that info because that's where I had added my custom files and used the code to make the images on the homepage that switch on hover. This is the first time I've used CSS so I really appreciate your help. Thank you @jai as well.