Shari Posted March 30, 2021 Share Posted March 30, 2021 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;} } Link to comment
jai Posted March 30, 2021 Share Posted March 30, 2021 @media only screen and (max-width: 768px) {#video-header {display: none;}} Link to comment
Shari Posted March 30, 2021 Author Share Posted March 30, 2021 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. Link to comment
creedon Posted March 30, 2021 Share Posted March 30, 2021 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
Shari Posted March 30, 2021 Author Share Posted March 30, 2021 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. Link to comment
creedon Posted March 31, 2021 Share Posted March 31, 2021 @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. 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
Shari Posted April 1, 2021 Author Share Posted April 1, 2021 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. 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 @media only screen and (max-width: 768px) {#video-header {display: none;}} Link to comment
creedon Posted April 1, 2021 Share Posted April 1, 2021 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. 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
Shari Posted April 2, 2021 Author Share Posted April 2, 2021 @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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.