AFDesign Posted January 2, 2020 Share Posted January 2, 2020 I'd like to replace the background header image with one that is designed to fit a vertical layout when site is viewed on mobile. Ideally text and icon sit above the person in the image, rather than to the side like they do for larger displays. site is https://icosahedron-rust-5y3f.squarespace.com/ password: 2020 The image below is the one I'd like to use for mobile. I can adjust image size/dimensions if needed. Any help greatly appreciated! djm 1 Link to comment
tuanphan Posted January 2, 2020 Share Posted January 2, 2020 The easiest way is insert 2 images. Then use code to hide Mobile Image on Desktop, hide Desktop Image on Mobile. You can do that, then share url again. Members on forum will help you. 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
AFDesign Posted January 2, 2020 Author Share Posted January 2, 2020 (edited) Thanks for the quick reply! But I'm not sure how to upload 2 images. Right now I have one image set as the block background. I'd like to replace it with a media query. If I could upload 2 background images, it should be easy to hide them as needed, but I don't see an option to load second image. Edited January 13, 2020 by AFDesign Link to comment
tuanphan Posted January 3, 2020 Share Posted January 3, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:640px) { .homepage article section:first-child img { object-position: 90% 10% !important; } .homepage article section:first-child { padding-top: 0 !important; } } 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
AFDesign Posted January 3, 2020 Author Share Posted January 3, 2020 Thanks. I've posted the code, but I'm not totally sure what that does. Link to comment
AFDesign Posted January 12, 2020 Author Share Posted January 12, 2020 I am still wrestling with this header and would love any help the community could offer. djm 1 Link to comment
djm Posted April 29, 2020 Share Posted April 29, 2020 @tuanphan I would like to do the same. Your code snippet: what does it do? My site: https://thermodynamx.squarespace.com (public) > Klick on »Kontakt« on top right. On mobile it looks like this: Link to comment
tuanphan Posted April 29, 2020 Share Posted April 29, 2020 2 hours ago, djm said: @tuanphan I would like to do the same. Your code snippet: what does it do? My site: https://thermodynamx.squarespace.com (public) > Klick on »Kontakt« on top right. On mobile it looks like this: @media screen and (max-width:767px) { [data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img { object-position: 90% 50% !important; } } 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
djm Posted April 29, 2020 Share Posted April 29, 2020 2 hours ago, tuanphan said: @media screen and (max-width:767px) { [data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img { object-position: 90% 50% !important; } } Thanks @tuanphan I see what you are doing here. But is there no way of changing the picture entirely? There’s just no way to display a portrait photo on mobile: Link to comment
tuanphan Posted May 2, 2020 Share Posted May 2, 2020 On 4/29/2020 at 10:06 PM, djm said: Thanks @tuanphan I see what you are doing here. But is there no way of changing the picture entirely? There’s just no way to display a portrait photo on mobile: You can set new image on mobile. If you like this ideal, please let me know, I will give the code djm 1 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
djm Posted May 4, 2020 Share Posted May 4, 2020 On 5/2/2020 at 4:25 PM, tuanphan said: You can set new image on mobile. If you like this ideal, please let me know, I will give the code @tuanphan Yes, that would be great. Link to comment
tuanphan Posted May 13, 2020 Share Posted May 13, 2020 On 5/4/2020 at 10:21 PM, djm said: @tuanphan Yes, that would be great. Missing your comment. Have you solved yet? 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
tuanphan Posted May 19, 2020 Share Posted May 19, 2020 1 hour ago, djm said: @tuanphan no, not yet. Any ideas? @media screen and (max-width:767px) { [data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img { visibility: hidden; } [data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background { background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png); background-size: cover; background-position: center center; background-repeat: no-repeat; } } djm 1 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
djm Posted May 30, 2020 Share Posted May 30, 2020 Thank you @tuanphan, this works perfectly. 😃 Link to comment
LizzyJo Posted July 16, 2020 Share Posted July 16, 2020 Is there a way to do this same concept, but with an image placed on your page, not a background image in your banner? Link to comment
tuanphan Posted July 16, 2020 Share Posted July 16, 2020 10 hours ago, LizzyJo said: Is there a way to do this same concept, but with an image placed on your page, not a background image in your banner? Yes. If you share link to your site, 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
LizzyJo Posted July 16, 2020 Share Posted July 16, 2020 (edited) @tuanphanThank you! The website is www.weareloudcommunity.com Edited July 22, 2020 by LizzyJo tag Link to comment
tuanphan Posted July 22, 2020 Share Posted July 22, 2020 On 7/16/2020 at 11:22 PM, LizzyJo said: @tuanphanThank you! The website is www.weareloudcommunity.com Add to Home > Design > Custom CSS @media screen and (max-width:640px) { div#block-yui_3_17_2_1_1594858759957_4467 { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat; } div#block-yui_3_17_2_1_1594858759957_4467 img { visibility: hidden; } } 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
LizzyJo Posted July 29, 2020 Share Posted July 29, 2020 @tuanphan Awesome! Thank you! I uploaded and replaced my own gif, but now the top and bottom get cut off, I changed the new image shape to square. How can I get it to fit correctly? Link to comment
vvc Posted July 31, 2020 Share Posted July 31, 2020 (edited) Hi Tuan! Is there any way you can help me with 2 things? 1) hide a banner image for a specific index page 2) resize the vh of the banner image I can't seem to target the banner image. Currently, I have the code. The adding of the image is fine, but the original banner image is still there and sticks out from underneath. https://lauren-soto-wjl8.squarespace.com/ PW: hello Thank you! @tuanphan Quote @mobile: ~"only screen and (max-width: 640px)"; @tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)"; @media @mobile { #picture-1 img { display: none; } #picture-1 .sqs-block-image img { display: block; } #picture-1 { background: url('https://static1.squarespace.com/static/59074252f5e2319ca143b4c0/t/5f239323bcdb807c8a87030a/1596166951242/About+%283%29.png'); background-repeat: no-repeat; background-size: 100%; } } https://static1.squarespace.com/static/59074252f5e2319ca143b4c0/t/5f239323bcdb807c8a87030a/1596166951242/About+(3).png Edited July 31, 2020 by vvc Link to comment
tuanphan Posted July 31, 2020 Share Posted July 31, 2020 1) hide a banner image for a specific index page all devices or mobile only? 2) resize the vh of the banner image You mean banner image or background image (inserted by your CSS)? 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
vvc Posted July 31, 2020 Share Posted July 31, 2020 @tuanphan Just mobile / tablet versions. and Banner image! Link to comment
vernayo Posted September 8, 2020 Share Posted September 8, 2020 Hello @tuanphan! Could you please help me resolve my issue too? I use a youtube video as a homepage background but in the mobile version it appears badly cropped. Can you suggest a solution? I am open to either adjusting the size or replacing the video with another video/image or even totally removing the video. Thanks in advance, the link to my site is www.mellowsophymusic.com (private). Link to comment
tuanphan Posted September 12, 2020 Share Posted September 12, 2020 On 9/8/2020 at 4:04 PM, vernayo said: Hello @tuanphan! Could you please help me resolve my issue too? I use a youtube video as a homepage background but in the mobile version it appears badly cropped. Can you suggest a solution? I am open to either adjusting the size or replacing the video with another video/image or even totally removing the video. Thanks in advance, the link to my site is www.mellowsophymusic.com (private). Can you setup password & share url again? 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment