jdylan423 Posted December 30, 2022 Share Posted December 30, 2022 I am trying to have 2 different landing pages for my site. One for when you login on a desktop and the other for mobile. I would like a background video to play for the desktop viewing but the background be a still image when viewed on a mobile device. Any idea how to achieve this? I am using 7.1. Thanks in advance Link to comment
tuanphan Posted January 3, 2023 Share Posted January 3, 2023 You can set a fallback image, then share site url, we can give some code to hide video on mobile, show image only 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
StefanieS Posted August 16, 2023 Share Posted August 16, 2023 This is exactly what I need help with! The fallback image is set. Here is the site URL: https://www.karenracanelli.com/ I would like to hide the video on mobile behind "featured classes" to show the fallback image only. I would be so grateful for the help! Link to comment
tuanphan Posted August 18, 2023 Share Posted August 18, 2023 On 8/17/2023 at 4:55 AM, StefanieS said: This is exactly what I need help with! The fallback image is set. Here is the site URL: https://www.karenracanelli.com/ I would like to hide the video on mobile behind "featured classes" to show the fallback image only. I would be so grateful for the help! Add this to Design > Custom CSS or Website > Website Tools > Custom CSS /* Mobile - Featured Classes - Hide video */ @media screen and (max-width:767px) { [data-section-id="648901cb23c0b1595a4647fe"] iframe { visibility: hidden !important; } } 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
StefanieS Posted August 19, 2023 Share Posted August 19, 2023 WOW! Thank you so, so much! Link to comment
Sarahgminton Posted November 19, 2023 Share Posted November 19, 2023 Hi there, I also need assistance with this same exact issue... https://www.woodlandfitness.com/. I set the fallback image but am not able to get the mobile version to set to the fallback image instead of the video on the desktop version of the site. Link to comment
Gretad81 Posted February 13 Share Posted February 13 Hi, I tried solving this myself but can't. Could someone help me? I would like: 1. ONLY show fall back image on mobile, not video (as it is cropped in a way that doesn't look good) 2. On desktop continue to show the video but NOT show the fall back image. At the moment in sometimes flashes up in the beginning and it doesn't look good. Can you help with this @tuanphan? Any help would be much appreciated! URL is www.teamgreen.earth Link to comment
tuanphan Posted February 14 Share Posted February 14 On 2/13/2024 at 5:23 PM, Gretad81 said: Hi, I tried solving this myself but can't. Could someone help me? I would like: 1. ONLY show fall back image on mobile, not video (as it is cropped in a way that doesn't look good) 2. On desktop continue to show the video but NOT show the fall back image. At the moment in sometimes flashes up in the beginning and it doesn't look good. Can you help with this @tuanphan? Any help would be much appreciated! URL is www.teamgreen.earth Try this code to Website > Website Tools > Custom CSS [data-section-id="6537da1b0888bd27966069d6"] { /* Mobile */ @media screen and (max-width:991px) { video { opacity: 0; } img { opacity: 1 !important; } } /* desktop */ @media screen and (min-width:992px) { img { opacity: 0 !important; } }} 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
Gretad81 Posted February 14 Share Posted February 14 @tuanphan Thank you so much. It works! Amaaaazing! Now I just have to work out why the image doesn't show with the lines in the centre even though the focus dot is right in the centre of the image. Any idea on that? Thanks a million!!! Link to comment
tuanphan Posted February 15 Share Posted February 15 12 hours ago, Gretad81 said: @tuanphan Thank you so much. It works! Amaaaazing! Now I just have to work out why the image doesn't show with the lines in the centre even though the focus dot is right in the centre of the image. Any idea on that? Thanks a million!!! What should it look like? 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
Gretad81 Posted February 15 Share Posted February 15 basically the image should be vertically centre aligned but even though the aligner dot is in the middle (see screenshot) the image is higher. I have now figured out that for some reason the image is hidden behind the disappearing header. anyway to start the image below the header without adding a spacer (tried the spacer method and that messed up the desktop video). Might there be a bit of CSS we can use here? Thank you so much! Really appreciate your help! Link to comment
tuanphan Posted February 16 Share Posted February 16 You can add a blank section above current banner image, then use this CSS code to make it minimum height body.homepage article section:first-child { min-height: unset !important; height: 83px !important; } 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
Gretad81 Posted February 16 Share Posted February 16 Thank you soooo much! That worked a treat for mobile but now has knocked out the video on desktop (video is now no longer vertically centre aligned 🫣) Any final ideas to fix that? I can't thank you enough, I have already learned so much in this process!! Link to comment
tuanphan Posted February 17 Share Posted February 17 Add this code under @media screen and (min-width:992px) { body.homepage article section:first-child { min-height: unset !important; height: 61px !important; } } 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
Gretad81 Posted February 17 Share Posted February 17 thanks so much! Really appreciate you help. Unfortunately it didn't fix the video but I think I will just use a different photo for mobile instead. Link to comment
tuanphan Posted February 18 Share Posted February 18 That code run on desktop only. The code I sent in previous comment is for mobile Gretad81 1 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
rosepalmer22 Posted February 18 Share Posted February 18 Hi I have the same issue. I have a video loop for the desktop site (www.roseacpalmer.co.uk) but on mobile view it looks terrible - either a white block beneath it or the video is too big and cropped nadly so doesn't look good (see screenshots). I would ideally like to make the video look good but if that isn't possible I would prefer a still image on the mobile site. Can you advise how to do this? Link to comment
Gretad81 Posted February 18 Share Posted February 18 @rosepalmer22 I know, it is so annoying that some things like this still hang together with desktop. @tuanphan was so kind as to give me this code snippet above (but you need to find out what your video/image is called, that is the part I couldn't work out). before that you also set the fall back image. So when you upload the video and switch to mobile view in the editor mode, in there you can scroll down and it will say "fallback image". See screenshot. Then you need to enter the code. [data-section-id="6537da1b0888bd27966069d6"] { /* Mobile */ @media screen and (max-width:991px) { video { opacity: 0; } img { opacity: 1 !important; } } /* desktop */ @media screen and (min-width:992px) { img { opacity: 0 !important; } }} Link to comment
rosepalmer22 Posted February 18 Share Posted February 18 Thanks! Could you advise where I find the image name? @tuanphan Link to comment
tuanphan Posted February 20 Share Posted February 20 On 2/18/2024 at 9:01 PM, rosepalmer22 said: Hi I have the same issue. I have a video loop for the desktop site (www.roseacpalmer.co.uk) but on mobile view it looks terrible - either a white block beneath it or the video is too big and cropped nadly so doesn't look good (see screenshots). I would ideally like to make the video look good but if that isn't possible I would prefer a still image on the mobile site. Can you advise how to do this? The height of the video is not enough to fill the height of the mobile screen, so a white block will appear. But if make video fullheight, it won't fullsize You can consider replacing it with image on mobile only (If you need this, I can give code) 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
tuanphan Posted February 20 Share Posted February 20 On 2/18/2024 at 9:34 PM, Gretad81 said: @rosepalmer22 I know, it is so annoying that some things like this still hang together with desktop. @tuanphan was so kind as to give me this code snippet above (but you need to find out what your video/image is called, that is the part I couldn't work out). before that you also set the fall back image. So when you upload the video and switch to mobile view in the editor mode, in there you can scroll down and it will say "fallback image". See screenshot. Then you need to enter the code. [data-section-id="6537da1b0888bd27966069d6"] { /* Mobile */ @media screen and (max-width:991px) { video { opacity: 0; } img { opacity: 1 !important; } } /* desktop */ @media screen and (min-width:992px) { img { opacity: 0 !important; } }} On 2/19/2024 at 12:57 AM, rosepalmer22 said: Thanks! Could you advise where I find the image name? @tuanphan It calls Section ID, not image name, use this free tool to find id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff 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
veterantumblrblogger Posted 21 hours ago Share Posted 21 hours ago (edited) I am having trouble with the code - it isn't working for my site - would you be able to help me? I'm looking to: 1. ONLY show fall back image on mobile, not video 2. On desktop continue to show the video but NOT show the fall back image. @tuanphan https://cello-carillon-xc85.squarespace.com/ Edited 20 hours ago by veterantumblrblogger Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment