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 January 28 Share Posted January 28 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 January 28 Share Posted January 28 (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 January 28 by manos Link to comment
Nalini Posted January 28 Share Posted January 28 (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 January 28 by Nalini Link to comment
tuanphan Posted February 2 Share Posted February 2 On 1/28/2023 at 1:51 PM, brownbranding said: 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/ I see you solved with this CSS code? @media only screen and (max-width: 640px) { #new-page-1 img { display:none } #new-page-1 .sqs-block-image img { display: block } #new-page-1 { background: url('https://images.squarespace-cdn.com/content/v1/56b6af2cb654f92cc30c8913/4dec8924-ba56-4f14-a98f-ea0dc169cc09/banner+BOOK.png?format=1500w'); background-repeat: no-repeat; background-size: 100% } } On 1/28/2023 at 3:15 PM, manos said: 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/ I remember I answered this, maybe on forum or email. You try checking it again. On 1/29/2023 at 6:05 AM, Nalini said: 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 Which image are you referring to? Summit227 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
cardano_women Posted February 13 Share Posted February 13 Hello! I too, need assistance ASAP. Resizing the banner to be mobile responsive, if possible. www.cardanowomen.io Desktop version looks fantastic to me, but I blanked and sadly the mobile version looks dismal. I've tried a few from the forum, some have looked okay while others sadly haven't worked at all. Realizing it's not a one-size fit's all, I'd really appreciate the help to finally finish the site. If anyone could help me it would be really appreciate. Thank you! Link to comment
tuanphan Posted February 15 Share Posted February 15 On 2/13/2023 at 2:02 PM, cardano_women said: Hello! I too, need assistance ASAP. Resizing the banner to be mobile responsive, if possible. www.cardanowomen.io Desktop version looks fantastic to me, but I blanked and sadly the mobile version looks dismal. I've tried a few from the forum, some have looked okay while others sadly haven't worked at all. Realizing it's not a one-size fit's all, I'd really appreciate the help to finally finish the site. If anyone could help me it would be really appreciate. Thank you! Add to Design > Custom CSS /* resize mobile section */ @media screen and (max-width:767px) { [data-section-id="62e4da24826c517b285c2e25"] { min-height: unset !important; height: 15vh; } [data-section-id="62e4da24826c517b285c2e25"] .html-block * { font-size: 16px; } } 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
ruralstudio Posted February 20 Share Posted February 20 Hi there, I've used the following code to upload an alternative image for header/background image on mobile, but I'd like it to display on home page only - it's currently displaying on all pages in mobile view. Would you be able to help advise what I should add in here please to display on home page only? Many thanks! @media only screen and (max-width: 640px){ #page .page-section:nth-child(1) .section-background img {opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/635e701cba90e76df1723034/t/63f20b656fd184188261b044/1676807024721/diggers-cider-home-page-mobile-image.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } } Link to comment
tuanphan Posted February 25 Share Posted February 25 On 2/20/2023 at 9:01 PM, ruralstudio said: Hi there, I've used the following code to upload an alternative image for header/background image on mobile, but I'd like it to display on home page only - it's currently displaying on all pages in mobile view. Would you be able to help advise what I should add in here please to display on home page only? Many thanks! @media only screen and (max-width: 640px){ #page .page-section:nth-child(1) .section-background img {opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/635e701cba90e76df1723034/t/63f20b656fd184188261b044/1676807024721/diggers-cider-home-page-mobile-image.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; } } Change your code to this @media only screen and (max-width: 767px){ body.homepage { #page .page-section:nth-child(1) .section-background img {opacity:0 } #page .page-section:nth-child(1) .section-background { background-image: url(https://static1.squarespace.com/static/635e701cba90e76df1723034/t/63f20b656fd184188261b044/1676807024721/diggers-cider-home-page-mobile-image.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; }} } 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
Cbanks85 Posted March 16 Share Posted March 16 I am having trouble with the slider banner converting to mobile for all pictures. website is www.longpointgear.com Appreciate any help Link to comment
Summit227 Posted March 21 Share Posted March 21 (edited) On 3/15/2023 at 8:14 PM, Cbanks85 said: I am having trouble with the slider banner converting to mobile for all pictures. website is www.longpointgear.com Appreciate any help Your site seems to be PW protected. You'd either need to remove the PW or post it publicly to get some help. Cheers! Edited March 21 by Summit227 Link to comment
Profira Posted April 28 Share Posted April 28 (edited) Hi, @tuanphan! I tried, but no luck. It seems like I do not find the element to which I should apply the CSS code. Please help with the resizing of the banners (different pages) on the mobile version: https://www.wids.ch/ Thank you Edited April 28 by Profira Link to comment
tuanphan Posted April 29 Share Posted April 29 21 hours ago, Profira said: Hi, @tuanphan! I tried, but no luck. It seems like I do not find the element to which I should apply the CSS code. Please help with the resizing of the banners (different pages) on the mobile version: https://www.wids.ch/ Thank you Which page & Which banners? 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