Jump to content

Hiding a page from Mobile View

Recommended Posts

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

}

Screen Shot 2021-03-29 at 8.29.47 PM.png

Link to comment
  • Replies 8
  • Views 611
  • Created
  • Last Reply
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?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

1919199892_ScreenShot2021-03-31at1_27_13PM.png.b77c43034a668beb915f8f5a40a35f82.png

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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

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?

1008186475_ScreenShot2021-04-01at11_44_01AM.png.4a3db2622efabaa6858e96cd39ea2b83.png

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.