HarKS Posted October 31, 2020 Share Posted October 31, 2020 Hi All, This question seems to have an impossible outlook. I have been trying to resize 'background-images' on mobile in 7.1. As you may know, background images can either be 'full bleed' or 'inset'. I prefer to use 'full bleed', however, in mobile, it just doesn't look right. I don't want to make compromises. As you can see from my attached file, I essentially want to shrink my background image, so all of it fits in. Any solutions? Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 (edited) 12 minutes ago, HarKS said: Hi All, This question seems to have an impossible outlook. I have been trying to resize 'background-images' on mobile in 7.1. As you may know, background images can either be 'full bleed' or 'inset'. I prefer to use 'full bleed', however, in mobile, it just doesn't look right. I don't want to make compromises. As you can see from my attached file, I essentially want to shrink my background image, so all of it fits in. Any solutions? Try this code by tuan. Paste this code in your custom css located in your design menu. @media screen and (max-width:767px) { .collection-ID Here.view-item #page section:nth-child(1) { min-height: 50vh !important; } } Edited October 31, 2020 by inunzi Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 1 minute ago, inunzi said: Try this code by tuan. Paste this code in your custom css located in your design menu. @media screen and (max-width:767px) { .collection-ID Here.view-item #page section:nth-child(1) { min-height: 50vh !important; } } Let me know how it goes 😁 Link to comment
HarKS Posted October 31, 2020 Author Share Posted October 31, 2020 Hi, Unfortunately, nothing happened with this Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 1 minute ago, HarKS said: Hi, Unfortunately, nothing happened with this Hmm that’s weird. Are you on 7.1 or 7.0? Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 Just now, inunzi said: Hmm that’s weird. Are you on 7.1 or 7.0? Also did you delete “ID HERE” with your collection Id? Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 1 minute ago, inunzi said: Also did you delete “ID HERE” with your collection Id? So for example it could look like this. @media screen and (max-width:767px) { .collection-5e77e8500ff82c23205f2869.view-item #page section:nth-child(1) { min-height: 50vh !important; } } Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 Would you like me to find your collection Id for you? Link to comment
HarKS Posted October 31, 2020 Author Share Posted October 31, 2020 Definitely replaced the ID correctly, and 7.1 Link to comment
inunzi Posted October 31, 2020 Share Posted October 31, 2020 11 minutes ago, HarKS said: Definitely replaced the ID correctly, and 7.1 Wait so did you finish it yet? It’s sounded like sarcasm 😅 Link to comment
HarKS Posted October 31, 2020 Author Share Posted October 31, 2020 No sarcasm. I replaced the collection ID as I have a block identifier Link to comment
inunzi Posted November 1, 2020 Share Posted November 1, 2020 1 hour ago, HarKS said: No sarcasm. I replaced the collection ID as I have a block identifier Oh ok. Did that work? Link to comment
HarKS Posted November 1, 2020 Author Share Posted November 1, 2020 No it did not do anything. The only css that had some effect was @media screen and (max-width:767px) { [data-section-id="5f95e4dc3867be310249b267"] { min-height: 80vh !important; padding:49.9px; } } It was posted by Tuan on a different thread. But not much changed as you can see from my first post in this thread Link to comment
tuanphan Posted November 1, 2020 Share Posted November 1, 2020 Can you share site url? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
HarKS Posted November 1, 2020 Author Share Posted November 1, 2020 I sent you my URL and Passcode Link to comment
HarKS Posted November 1, 2020 Author Share Posted November 1, 2020 I tried this, but nothing happened also @media screen and (max-width:767px) { [data-section-id="5f95e4dc3867be310249b267"] .section-background {background: url ("https://static1.squarespace.com/static/5f00b8715206ef2e13b8f42b/t/5f9832477fd0716136af4379/1604248792602/Banksy.jpg"); background-size:contain !important}} Link to comment
tuanphan Posted November 2, 2020 Share Posted November 2, 2020 12 hours ago, HarKS said: I sent you my URL and Passcode Can you share? I don't see Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
HarKS Posted November 2, 2020 Author Share Posted November 2, 2020 https://agirlaftermyownheart.squarespace.com/config/design Link to comment
lisbet Posted February 9, 2021 Share Posted February 9, 2021 @tuanphan @HarKS did you figure out a solution? I have the same issue on 7.1 Link to comment
ArminB Posted February 9, 2021 Share Posted February 9, 2021 I'd recommend designing a separate section specifically for mobile where you can even use a different image and use CSS to Hide the Desktop Version on mobile Hide the Mobile Version on desktop something like: @media only screen and (max-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"] {display:none}} @media only screen and (min-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"] {display:none}} You need the find the section ID with the Browser Site Inspector About Armin:Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084Website: www.braunsberger-media.comLeaders Lodge: See my Profile Link to comment
tuanphan Posted February 9, 2021 Share Posted February 9, 2021 3 hours ago, lisbet said: @tuanphan @HarKS did you figure out a solution? I have the same issue on 7.1 Can you share site url? 2 hours ago, ArminB said: I'd recommend designing a separate section specifically for mobile where you can even use a different image and use CSS to Hide the Desktop Version on mobile Hide the Mobile Version on desktop something like: @media only screen and (max-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"] {display:none}} @media only screen and (min-width: 640px) { [data-section-id="5e57aca14e2df00530a6382d"] {display:none}} You need the find the section ID with the Browser Site Inspector Use this tool to find data section id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care 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