Creativore Posted May 7, 2020 Share Posted May 7, 2020 Site URL: https://grey-sapphire-9lfk.squarespace.com I thought this was going to be easier than it's turning out to be... On the desktop and tablet view - the banner image is a good height and the content fits well and works. However, on the mobile view, the banner is essentially the same height and therefore cuts a significant amount of the picture out. What I'm wanting is for the mobile view to respond and display at a height that is similar to the site in desktop view. Please see below for current desktop and mobile view and *desired* mobile view. @tuanphan Desktop view: Current Mobile view: *DESIRED* mobile view: Password for site: summary Thank you! Link to comment
tuanphan Posted May 7, 2020 Share Posted May 7, 2020 Can you share link to page in screenshot? Creativore 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
Creativore Posted May 7, 2020 Author Share Posted May 7, 2020 20 minutes ago, tuanphan said: Can you share link to page in screenshot? Hey @tuanphan, thank you. Page url is: https://grey-sapphire-9lfk.squarespace.com/quotes-assessment Link to comment
Creativore Posted May 7, 2020 Author Share Posted May 7, 2020 2 hours ago, tuanphan said: Can you share link to page in screenshot? Message me when you get a chance, @tuanphan - I have changed the password temporarily. Stay safe. Link to comment
tuanphan Posted May 7, 2020 Share Posted May 7, 2020 1 hour ago, Creativore said: Message me when you get a chance, @tuanphan - I have changed the password temporarily. Stay safe. What is password? Creativore 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
Creativore Posted May 7, 2020 Author Share Posted May 7, 2020 41 minutes ago, tuanphan said: What is password? Password: thankstuanphan Link to comment
Creativore Posted May 7, 2020 Author Share Posted May 7, 2020 10 hours ago, tuanphan said: What is password? Commenting to bump post. Link to comment
Solution tuanphan Posted May 11, 2020 Solution Share Posted May 11, 2020 On 5/8/2020 at 6:11 AM, Creativore said: Commenting to bump post. Try adding to Home > Design > Custom CSS @media screen and (max-width:640px) { body#collection-5e8ac321776c472b726bea8f { figure.Intro-image.loaded img { width: 100% !important; left: 0 !important; top: 0 !important; height: auto !important; } section.Intro.Intro--has-image .spacer-block { display: none; } } } Creativore 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
Creativore Posted May 11, 2020 Author Share Posted May 11, 2020 13 hours ago, tuanphan said: Try adding to Home > Design > Custom CSS @media screen and (max-width:640px) { body#collection-5e8ac321776c472b726bea8f { figure.Intro-image.loaded img { width: 100% !important; left: 0 !important; top: 0 !important; height: auto !important; } section.Intro.Intro--has-image .spacer-block { display: none; } } } Thank you @tuanphan! That works great for that page! Thank you. To apply it across the whole site, how would I add the extra collection id's to the code? Thank you so much! You are a champ. Link to comment
Creativore Posted May 12, 2020 Author Share Posted May 12, 2020 @tuanphan Thank you so much! I amended the code to this: @media screen and (max-width:640px) { figure.Intro-image.loaded img { width: 100% !important; left: 0 !important; top: 0 !important; height: auto !important; } section.Intro.Intro--has-image .spacer-block { display: none; } } tuanphan 1 Link to comment
Creativore Posted May 12, 2020 Author Share Posted May 12, 2020 17 hours ago, tuanphan said: Try adding to Home > Design > Custom CSS @media screen and (max-width:640px) { body#collection-5e8ac321776c472b726bea8f { figure.Intro-image.loaded img { width: 100% !important; left: 0 !important; top: 0 !important; height: auto !important; } section.Intro.Intro--has-image .spacer-block { display: none; } } } Hey @tuanphan, I'm trying to do the same thing on the Home page and I can't get rid of the spaces... This is the code I wrote, can you see what I'm doing wrong with this? @media screen and (max-width:640px) { figure.Index-gallery-item-image img { width: 100% !important; left: 0 !important; top: 0 !important; height: auto !important; } section#project-gallery.Index-gallery.loaded.sqs-frontend-overlay-editor-widget-host .spacer-block { display: none !important; } } Link to comment
knoble07 Posted September 25, 2020 Share Posted September 25, 2020 I'm having this same issue with making all the banner images on my site smaller when viewed on mobile. I'd like them to be 75% of the current height. I tried the above but it wasn't working for me...' https://prism-octagon-5k9s.squarespace.com/ pw: krysta thanks! Link to comment
jessmartinez Posted March 6, 2021 Share Posted March 6, 2021 Hi @tuanphan can you also help with this on our website? The URL is justineapple.squarespace.com/home-new. We added a slideshow banner but we need the banner on mobile to be the same rectangle size as how it is on desktop view. Thank you! Link to comment
SSong Posted November 12, 2021 Share Posted November 12, 2021 (edited) Could anyone help me to make the top banner of my home page taller with custom css? Thank you! Edited November 12, 2021 by SSong typo Link to comment
tuanphan Posted November 14, 2021 Share Posted November 14, 2021 On 11/13/2021 at 3:35 AM, SSong said: Could anyone help me to make the top banner of my home page taller with custom css? Thank you! Desktop only or all devices? 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
SSong Posted November 16, 2021 Share Posted November 16, 2021 On 11/14/2021 at 8:57 AM, tuanphan said: Desktop only or all devices? just on mobile, thank you! Link to comment
tuanphan Posted November 18, 2021 Share Posted November 18, 2021 On 11/16/2021 at 10:40 PM, SSong said: just on mobile, thank you! Add to Design > Custom CSS @media screen and (max-width:640px) { section#hero-image-1 { min-height: 90vh !important; } } SSong 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
SSong Posted November 19, 2021 Share Posted November 19, 2021 On 11/17/2021 at 11:58 PM, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:640px) { section#hero-image-1 { min-height: 90vh !important; } } THANK YOU!!! Link to comment
ambermadden03 Posted September 12, 2022 Share Posted September 12, 2022 @tuanphan can you please help me do this on my 7.1 site? thebartenders.squarespace.com PW: RosePetalMartini Link to comment
tuanphan Posted September 17, 2022 Share Posted September 17, 2022 On 9/12/2022 at 4:09 PM, ambermadden03 said: @tuanphan can you please help me do this on my 7.1 site? thebartenders.squarespace.com PW: RosePetalMartini Hi, Add to Design > Custom CSS /* resize mobile slideshow */ @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 30vh !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment