Jump to content

Banner Image Won't Resize for Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

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
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
  • 4 weeks later...

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
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
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
  • 5 months later...
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
  • 4 weeks later...
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. 

Screen Shot 2022-12-15 at 10.12.41 PM.png

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
  • 4 weeks later...

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 by xfallenmoon
Link to comment
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
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
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.