Banner Image Won't Resize for Mobile View

BMLM · 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!

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

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

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

Sachacha · 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!

KyleV · 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!

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

samuelMaya · December 16, 2022

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

tuanphan · 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?

xfallenmoon · January 12

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

tuanphan · 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>

DeciDeci · 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/

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

brownbranding · 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/

manos · January 28

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

Nalini · January 28

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

tuanphan · 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?

cardano_women · 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!

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

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

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

Cbanks85 · March 16

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

website is www.longpointgear.com

Appreciate any help

Summit227 · March 21

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

Profira · April 28

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

tuanphan · 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?

Banner Image Won't Resize for Mobile View

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources