Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 5

Banner Image Won't Resize for Mobile View


TheIDBootCamp

Question

Hello, 

Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image.

Thanks in advance.

IMG_5025.PNG

Screen Shot 2019-12-13 at 11.16.48 AM.png

Link to comment

Recommended Posts

  • 0
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
  • 0

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
  • 0
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
  • 0
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

Create an account or sign in to comment

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

×
×
  • Create New...