Banner Image Won't Resize for Mobile View

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!

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;
}
}

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...

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;
}
}

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!

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!

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;
}
}

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. 

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?

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>

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>

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/

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;
}
}

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/

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/

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 

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?

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!

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;
}
}

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;
}
}

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;
}}
}

I am having trouble with the slider banner converting to mobile for all pictures. 

website is www.longpointgear.com

Appreciate any help

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!

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

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?