DavvaMC Posted June 18 Share Posted June 18 This has been driving me crazy. I need to display a differen section background image for mobile and tablet. I added this code #collection-6669d27f9521df77f098ca38 section:nth-child(1), #collection-66715f670ee4966ea7aa4bb7 section:nth-child(1) { background-image: url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/66713b9f19e9862447fd3ed8/1718696863947/bground-landing-mobile8.jpg') !important; right: 0 !important; bottom: 0 !important; left: 0 !important; min-height: unset !important; height: 100vh; object-position: -680px -200px !important; } But when I view the page it still seems to be using desktop settings. The page example is here - https://www.cn8.co.uk/landing-2 I uploaded a different Swan image that is 640px wide. Hopefully someone can help me! Many thanks Link to comment
DavvaMC Posted June 18 Author Share Posted June 18 Sorry the code is #collection-66715f670ee4966ea7aa4bb7 .section-background, .section-background .section-background-content { background-image: url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/667033d5ada3fd747c36b1cb/1718629334120/bground-mobile-new.jpg') !important; right: 0 !important; bottom: 120 !important; left: 0 !important; min-height: unset !important; height: 100vh; position: absolute; It seems to fill the full width, and I need to show more of the swan. Link to comment
Solution Lesum Posted June 18 Solution Share Posted June 18 @DavvaMC Hi! First, remove your previous code as it isn't changing the background image on mobile and has some errors. Then, add the following code: @media only screen and (max-width: 991px){ section[data-section-id="66715f670ee4966ea7aa4bba"] .section-background img { opacity:0 !important; } section[data-section-id="66715f670ee4966ea7aa4bba"] .section-background { background-image:url('https://static1.squarespace.com/static/5fec63b71c227637fcd74134/t/667033d5ada3fd747c36b1cb/1718629334120/bground-mobile-new.jpg') !important; background-size: contain; background-position: 100% 100%; background-repeat: no-repeat; } } 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
DavvaMC Posted June 18 Author Share Posted June 18 Thanks so much! what would I nee to change in order for the image to be closer to the content below but still aligning bottom of the sreen? Hope that makes sense. Any much appreciated for your help. Link to comment
DavvaMC Posted June 18 Author Share Posted June 18 Also what should the ideal width of the mobile image be? Link to comment
Lesum Posted June 18 Share Posted June 18 7 minutes ago, DavvaMC said: Thanks so much! what would I nee to change in order for the image to be closer to the content below but still aligning bottom of the sreen? Hope that makes sense. Any much appreciated for your help. If you try the code I suggested, it might fix alignment issue. 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
DavvaMC Posted June 18 Author Share Posted June 18 (edited) Thanks, I will give it a go and get back to you if you don't mind, this has been driving me crazy for ages now trying to get it right 🙂 Edited June 18 by DavvaMC Link to comment
Lesum Posted June 18 Share Posted June 18 6 minutes ago, DavvaMC said: Also what should the ideal width of the mobile image be? For standard iPhone models, the ideal width is 375 pixels, and for iPhone Plus models, it's 414 pixels. For iPads and iPad Minis, a width of 768 pixels works well, while larger iPad Pro models benefit from a width of 1024 pixels. Consider using a large width image and placing the Swan image centered at the bottom. 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
DavvaMC Posted June 18 Author Share Posted June 18 So create a 2560px wide image as recommended by SP, but have the swan centrally aligned. Do I need to consdider height dimensions when I create the image? Link to comment
Lesum Posted June 18 Share Posted June 18 4 minutes ago, DavvaMC said: So create a 2560px wide image as recommended by SP, but have the swan centrally aligned. Do I need to consdider height dimensions when I create the image? No, you don't necessarily need to consider the height dimension. However, with a width of 2560px and a height of 1440px, the height is proportionally related to the width. 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
DavvaMC Posted June 19 Author Share Posted June 19 Thaks, it startig to look better now, however when viewed on 810px and 1024px there is a big gap between the text and the swan image can this be reduced, or do I have to create other images for different sizes? Thanks again. Link to comment
tuanphan Posted June 21 Share Posted June 21 https://www.cn8.co.uk/landing-2 url doesn't work. Can you check it again? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment