BMLM Posted April 12, 2022 Share Posted April 12, 2022 Hi There, I need help resizing the banner slideshow on the mobile version. www.thedesignmaker.ca Desktop version is great but the mobile version crop the images and looks bad, I want to show the full length of the images. I've tried a bunch of code from the forum but nothing worked. If anyone could help me it would be really appreciate. Thank you! Link to comment
tuanphan Posted April 18, 2022 Share Posted April 18, 2022 On 4/13/2022 at 3:21 AM, BMLM said: Hi There, I need help resizing the banner slideshow on the mobile version. www.thedesignmaker.ca Desktop version is great but the mobile version crop the images and looks bad, I want to show the full length of the images. I've tried a bunch of code from the forum but nothing worked. If anyone could help me it would be really appreciate. Thank you! Hi, Try adding this to Design > Custom CSS @media screen and (max-width:767px) { .user-items-list-item-container.user-items-list-banner-slideshow ul { min-height: unset !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
Sachacha Posted May 16, 2022 Share Posted May 16, 2022 Hi, I'm having the same issue with my portfolio site. I can't figure out what the CSS would be on my template to force the main image on my homepage to resize for mobile screens. A bit off topic, but I'm also curious how to change the visibility to none on my site title on just the homepage as well. sacha-marie.com Any help would be appreciated! Although, the mobile resizing should really be a toggled feature built into all official Squarespace templates... Link to comment
tuanphan Posted May 16, 2022 Share Posted May 16, 2022 4 hours ago, Sachacha said: Hi, I'm having the same issue with my portfolio site. I can't figure out what the CSS would be on my template to force the main image on my homepage to resize for mobile screens. A bit off topic, but I'm also curious how to change the visibility to none on my site title on just the homepage as well. sacha-marie.com Any help would be appreciated! Although, the mobile resizing should really be a toggled feature built into all official Squarespace templates... To hide logo on homepage only, add this to Design > Custom CSS body.homepage header.Header img { visibility: hidden; } To resize banner image on mobile, use this CSS code /* Resize top home banner */ @media screen and (max-width:900px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; } section#welcome { min-height: unset !important; height: 230px; } } 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
Sachacha Posted May 16, 2022 Share Posted May 16, 2022 38 minutes ago, tuanphan said: To hide logo on homepage only, add this to Design > Custom CSS body.homepage header.Header img { visibility: hidden; } To resize banner image on mobile, use this CSS code /* Resize top home banner */ @media screen and (max-width:900px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; } section#welcome { min-height: unset !important; height: 230px; } } Thanks so much! Link to comment
KyleV Posted November 16, 2022 Share Posted November 16, 2022 Hey, I too am having trouble getting my images to properly scale on mobile. My site for now is at: https://moose-cinnamon-sh3b.squarespace.com/ Any ideas? I'd love to get the banner images to resize to fit on a mobile screen. But I'd also be okay with that bottom banner image just disappearing on mobile. Thanks! Link to comment
tuanphan Posted November 21, 2022 Share Posted November 21, 2022 On 11/16/2022 at 7:24 AM, KyleV said: Hey, I too am having trouble getting my images to properly scale on mobile. My site for now is at: https://moose-cinnamon-sh3b.squarespace.com/ Any ideas? I'd love to get the banner images to resize to fit on a mobile screen. But I'd also be okay with that bottom banner image just disappearing on mobile. Thanks! Try adding to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="6373ca2b24d6e1559f6bdd0b"] { min-height: unset !important; height: 30vh; margin-top: 10vh; } } 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
samuelMaya Posted December 16, 2022 Share Posted December 16, 2022 (edited) Hi!, I want to increase the height of the section background image (on mobile only). I've tried everything but I haven't been able do it. https://natto.com.co/new-home-natto Thank you in advance to anyone that can help. Edited December 16, 2022 by samuelMaya include link Link to comment
tuanphan Posted December 20, 2022 Share Posted December 20, 2022 On 12/16/2022 at 10:15 AM, samuelMaya said: Hi!, I want to increase the height of the section background image (on mobile only). I've tried everything but I haven't been able do it. https://natto.com.co/new-home-natto Thank you in advance to anyone that can help. The page doesn't exist. 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 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
xfallenmoon Posted January 12 Share Posted January 12 (edited) I'm having the same issue. I added the below code to Page Settings > Advanced > Header. It resized the banner fine, but now there's a big black square under the banner on mobile. Something to do with the height. Help? http://www.xfallenmoon.com/ Oh, and it's not resizing on tablets either... not sure what I should add in the code for that. <style> @media screen and (max-width:640px) { .banner-thumbnail-wrapper img { width: 100% !important; height: auto !important; left: 0 !important; } } </style> Edited January 13 by xfallenmoon Link to comment
tuanphan Posted January 15 Share Posted January 15 On 1/13/2023 at 2:43 AM, xfallenmoon said: I'm having the same issue. I added the below code to Page Settings > Advanced > Header. It resized the banner fine, but now there's a big black square under the banner on mobile. Something to do with the height. Help? http://www.xfallenmoon.com/ Oh, and it's not resizing on tablets either... not sure what I should add in the code for that. <style> @media screen and (max-width:640px) { .banner-thumbnail-wrapper img { width: 100% !important; height: auto !important; left: 0 !important; } } </style> Use this code <style> @media screen and (max-width:900px) { .banner-thumbnail-wrapper img { width: 100% !important; height: auto !important; left: 0 !important; } .banner-thumbnail-wrapper.has-description { padding: 0 !important; height: 115px !important; } } </style> 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
DeciDeci Posted January 16 Share Posted January 16 I am having a similar issue with the banner not resizing on the mobile version. The page is made in the foster template. I tried adding code from the above answers but it doesn't work. Could you help? Thanks in advance https://www.decideretcider.dk/ Link to comment
tuanphan Posted January 18 Share Posted January 18 On 1/16/2023 at 4:27 PM, DeciDeci said: I am having a similar issue with the banner not resizing on the mobile version. The page is made in the foster template. I tried adding code from the above answers but it doesn't work. Could you help? Thanks in advance https://www.decideretcider.dk/ Hi, You mean banner behind Shop Now button on homepage? @media screen and (max-width:640px) { body.homepage .Parallax-item:first-child img { width: 100% !important; height: auto !important; left: 0 !important; } section#hero-image-foster { height: 200px !important; } section#hero-image-foster .spacer-block { display: none; } } 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
brownbranding Posted Saturday at 06:51 AM Share Posted Saturday at 06:51 AM Hello, I'm having a similar problem for my mobile banner, it's not showing the entire banner. I tried countless videos on youtube for a code and none of them have worked properly. I found one, but it was too much space under the mobile banner . Can anybody help me out, it would be greatly appreciated. https://www.jeevanbrown.com/ Link to comment
manos Posted Saturday at 08:15 AM Share Posted Saturday at 08:15 AM (edited) Hi! My fallback image is getting cropped a lot in mobile. Can i make it show the entire picture? my website is https://www.star-surfing.com/ Edited Saturday at 08:16 AM by manos Link to comment
Nalini Posted Saturday at 11:05 PM Share Posted Saturday at 11:05 PM (edited) Hi! I'm having the same issue and tried a few different codes - The header cuts off on mobile phone. I'd like it to show up the same as on desktop. www.semicircle-panda-scpw.squarespace.com Edited Saturday at 11:06 PM by Nalini 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