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