Karmick Posted June 19, 2020 Share Posted June 19, 2020 Site URL: https://www.karmick.net/ Hi, I just finished setting up my website (Karmick.net). It looks great on a desktop or tablet, however, on mobile devices the background image on the homepage gets cut off on both edges. How can I change the homepage background image to one that fits mobile screens better, but only on mobile devices? Thank you in advance for the help! - Karmick Link to comment
Beyondspace Posted June 19, 2020 Share Posted June 19, 2020 Hi Karmick, You can get the new image url and replace the url() in this snippet, add it on home page Settings->Advanced->Custom Code <style> @media screen and (max-width: 640px) { section[data-section-id="5ee8ed2f626a7f2c7562d484"] .section-background img { opacity: 0 !important; } section[data-section-id="5ee8ed2f626a7f2c7562d484"] .section-background { background: url(https://images.squarespace-cdn.com/content/v1/5ceec25f5691d500017ce316/1559158088681-WIABL7LERICNYGNY291C/ke17ZwdGBToddI8pDm48kDHPSfPanjkWqhH6pl6g5ph7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0mwONMR1ELp49Lyc52iWr5dNb1QJw9casjKdtTg1_-y4jz4ptJBmI9gQmbjSQnNGng/AdobeStock_1578886_Home_Header_Overlay.jpg?format=2500w); background-repeat: no-repeat; background-size: cover; } } </style> </style> BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
christyprice Posted June 20, 2020 Share Posted June 20, 2020 Here’s a different method that I use: https://christyprice.com/squarespace-tips-tricks/show-different-banner-mobile-desktop Beyondspace 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
SnoStudios Posted January 2, 2021 Share Posted January 2, 2021 @christyprice This worked perfectly! Thank you!! christyprice 1 Link to comment
SnoStudios Posted January 3, 2021 Share Posted January 3, 2021 @christyprice After implementing CSS, I ran into a couple small issues I was hoping you could help with. On my site www.ericsnoza.com I have background videos running on several of my pages. I have mobile versions and desktop versions of the videos. Using your CSS, I created two sections (one version/one mobile). The first issue I run into is that on screen rotation the new video will not run/load. It will only display the default background image. The second issue is that on mobile devices, I am getting white bars on the sides in landscape view, and when I rotate back to portrait view, those white bars crop my video in the background. (see see attached) I am testing on iPhone X with both Chrome and Safari. Let me know if you need any additional information. Thanks! Link to comment
christyprice Posted January 3, 2021 Share Posted January 3, 2021 Hi @SnoStudios- do you have the same problems if you aren’t using the css from the post? Often background videos don’t play on mobile (not a Squarespace specific issue) - a workaround is to use a gif. I don’t really use background videos, so maybe someone with more experience can help out with the white bars. christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 Link to comment
SnoStudios Posted January 3, 2021 Share Posted January 3, 2021 @christyprice Thank you for your response! Yes, this happened even before I inserted your code. Sorry, if I w was not clear on that point. These videos all play, it is only when the page orientation changes to reveal the alternate version of the video, that video does not load. I was just hoping there was an amendment to the CSS I could add that would force a load/playing of the video of the newly revealed page video. Link to comment
christyprice Posted January 3, 2021 Share Posted January 3, 2021 @SnoStudios sorry I don’t have a solution for you. You may want to start a new forum thread so someone with more experience with video can help out. creedon 1 christyprice.com 🇺🇸 Austin, TX US ✅ Get my 100+ item Client Process Checklist for $17. 📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts 🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz) 🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023 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