Waggit Posted May 3 Share Posted May 3 Hi all I'm trying to replace the background image in my home page hero section with a specific mobile image. The CSS code I used previously was working but for some reason it isn't anymore. The mobile image is displaying, but the desktop image is still visible above it (see attached) Can anyone help? This is the code I'm currently using: @media only screen and (max-width:767px) { section[data-section-id="649c497cc96191197781d2c2"] .section-background-content { display: none; } section[data-section-id="649c497cc96191197781d2c2"] .section-background { background-image: url("https://images.squarespace-cdn.com/content/649c4974564aa84f6336f070/528a0fde-ceaf-42ee-a36f-915fa2a3ed24/wag-wall-main-final-mobile.png?content-type=image%2Fpng") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } } Link to comment
melody495 Posted May 3 Share Posted May 3 3 hours ago, Waggit said: The mobile image is displaying, but the desktop image is still visible above it (see attached) Can anyone help? This is the code I'm currently using: @media only screen and (max-width:767px) { section[data-section-id="649c497cc96191197781d2c2"] .section-background-content { display: none; } } Hi @Waggit can't tell without a url, but if you're still seeing the desktop image, then this line (display: none) isn't being used. Likely the CSS selector has changed. Check that this element still exists in your site .section-background-content. Depending on the version/your site, it could be .section-background img. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Waggit Posted June 5 Author Share Posted June 5 Hi Melody Sorry for the extremely slow response, I'd forgotten all about this. I've tried to solve it but I haven't had much luck. I'm not a developer so I'm unsure how to fix or check - site .section-background-content. This is my web address: https://www.madebywag.com/ Would it help if I gave you backend access? Thanks so much for your help with this Wag Link to comment
melody495 Posted June 5 Share Posted June 5 Hi @Waggit try replacing your code with the below. I replaced the CSS selector ".section-background-content" with ".section-background img". @media only screen and (max-width:767px) { section[data-section-id="649c497cc96191197781d2c2"] .section-background img { display: none; } But I am not sure what you expect to see in terms of mobile and desktop version. Seems like the background image you've set within Squarespace is the same image you've set in the CSS code? Let me know how it goes, and if we can help further. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Waggit Posted June 18 Author Share Posted June 18 Hi Melody Unfortunately, it's still not working. The desktop image is still displaying over the top of the mobile image on mobile devices. The image I want to display on mobile is a smaller version of the desktop version. It looks the same, but it's just a lot smaller (my head isn't as big). This is the mobile image I want to display - This is the CSS code I'm currently using: @media only screen and (max-width: 767px) { section[data-section-id="649c497cc96191197781d2c2"] .section-background-content { display: none !important; } section[data-section-id="649c497cc96191197781d2c2"] .section-background::before { content: ""; display: block; background-image: url("https://images.squarespace-cdn.com/content/649c4974564aa84f6336f070/528a0fde-ceaf-42ee-a36f-915fa2a3ed24/wag-wall-main-final-mobile.png?content-type=image%2Fpng") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } } Link to comment
Lesum Posted June 18 Share Posted June 18 (edited) @Waggit Hi! Try adding this code under Website > pages > Website Tools > Custom CSS @media only screen and (max-width: 767px){ section[data-section-id="649c497cc96191197781d2c2"] .section-background img { opacity: 0 !important; } section[data-section-id="649c497cc96191197781d2c2"] .section-background { background-image: url('https://images.squarespace-cdn.com/content/649c4974564aa84f6336f070/528a0fde-ceaf-42ee-a36f-915fa2a3ed24/wag-wall-main-final-mobile.png?content-type=image/png') !important; background-size: contain; background-position: 100% 100%; background-repeat: no-repeat; } } Let me know how it goes. BTW, your site looks amazing! Edited June 18 by Lesum tuanphan 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee? 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