Jump to content

Banner Image Won't Resize for Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

8 hours ago, TrojanMarketingGroup said:

 

@tuanphan thanks for your help did not realize you responded. Is there actually a piece of code you can write to resize every single banner on the site for mobile at once, not just individual banners? My website is trojanmarketinggroup.org

Hi. No.

Each banner needs different code.

17 hours ago, tallytwo said:

@tuanphan can you help me too? Same issue. Banner images throughout site wont resize on mobile. I've tried some of the codes you provided throughout this thread, but they seem to be different for each site..?

piaggo.co

Thank you!!

I can't access your site. Can you check again?

 

17 hours ago, SamanthaFukui said:

Hi @tuanphan! Thank you for helping everyone. Could you please help me resize my banner so it fit's correctly on mobile.

website is www.samanthafukui.com

I'd like it to be spaced like this but it crops like this. Thanks in advance.

Add to Home > Design > Custom CSS

/* Resize mobile banner */
@media screen and (max-width:640px) {
div#content .page-banner-image-container img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#content .page-banner-wrapper {
    height: 100px;
}
}

 

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

Hey Tuanphan,

We're having the exact same problem  - we've tried all the codes put on here and some slightly work but not 100%, we'll get a white block at the top, a black gap at the bottom or it's resized and it's in the site header. 

This is on our home page but we need it done to ALL our pages on the website. Can you help?

Website is: www.workout-wolf.co.uk

1033622390_Screenshot2020-08-08at10_56_15.thumb.png.a657d41174580a32c782a34a9624fd32.png697217228_Screenshot2020-08-08at10_56_07.png.af058edba80f6ad8110dbb7c032398e5.png
 

Link to comment

@tuanphan thanks for the help you've provided to everyone here.  I'm having a similar issue as the other users where my banner images are being cut off in mobile.  I've attached comparison desktop vs mobile images for my landing, boutique and about us pages.  My website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Looking forward to your response.. 🙂2068458615_AboutUsDesktopImage.thumb.jpg.de59fd4baf4b0aadfeabbaa0cf0baa31.jpg45415118_Boutiquedesktopimage.thumb.jpg.fc6785522791875be0af42d19f11ace7.jpg1173706544_BannerImageDesktop.thumb.jpg.359f3a73327f3cbce453cc1e28ced8c6.jpg463879718_AboutUsImageMobile.jpg.bb0e42033f90428578eba5b81ff60c37.jpg2068458615_AboutUsDesktopImage.thumb.jpg.de59fd4baf4b0aadfeabbaa0cf0baa31.jpg

Banner image mobile.jpg

Boutique image mobile.jpg

Link to comment
14 hours ago, phowlett said:

@tuanphan thanks for the help you've provided to everyone here.  I'm having a similar issue as the other users where my banner images are being cut off in mobile.  I've attached comparison desktop vs mobile images for my landing, boutique and about us pages.  My website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Looking forward to your response.. 🙂

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</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 8/8/2020 at 4:57 PM, WORKOUTWOLF said:

Hey Tuanphan,

We're having the exact same problem  - we've tried all the codes put on here and some slightly work but not 100%, we'll get a white block at the top, a black gap at the bottom or it's resized and it's in the site header. 

This is on our home page but we need it done to ALL our pages on the website. Can you help?

Website is: www.workout-wolf.co.uk

 

Add to Home > Design > Custom CSS

/* Resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 30vh !important;
    height: 50vh;
}
}
/* END Resize mobile home banner */

 

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 8/7/2020 at 10:39 AM, Ibtisam said:

I have the same issue, but the css code did not work for me.

Can you share site url? We can check easier.

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 8/7/2020 at 3:42 AM, jherron said:

Site URL: https://www.monstersmonthly.com/

Hi!

I'm trying to use a full bleed gallery on my homepage and it works well on desktop. On mobile though it does not resize though. What can I do to get it to resize? I'm using Brine Template 7.0

Thanks!

 

See fine here. Did you solve?

image.thumb.png.fc11d32e4540388fc8ed1ebcc9b4645e.png

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
9 hours ago, tuanphan said:

Add to Page Settings > Advanced > header


<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

 

@tuanphan the code snippet helped with the optimization of the images from desktop to mobile.  However, they are still being cropped slightly.  In addition, I now have an issue with the text on the images not reducing proportionally in size with them.  Now the text on the pages look way too large.  Would you be able to assist me with fixing the issue I'm now having with the text?

Again website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Thanks again for all the help!!  🙂 

desktop 8_11_20.jpg

mobile 8_11_20.jpg

Link to comment
23 hours ago, tuanphan said:

Add to Page Settings > Advanced > header


<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

 

Hi @tuanphan 

Thank you for your help. We've just tried this code on our website and as you can see it's still the same..

Can you help?

1467969519_Screenshot2020-08-12at10_29_09.png.d4bbb36d1ca96fe649b5ca36a5f52ab6.png1039681909_Screenshot2020-08-12at10_29_14.png.ecdf5816fad82a4b6d07df93e11989d7.png

Link to comment
On 8/12/2020 at 4:31 PM, WORKOUTWOLF said:

Hi @tuanphan 

Thank you for your help. We've just tried this code on our website and as you can see it's still the same..

Can you help?

 

Can you include site url in your comment? I don't see url to check.

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 8/12/2020 at 2:45 AM, phowlett said:

@tuanphan the code snippet helped with the optimization of the images from desktop to mobile.  However, they are still being cropped slightly.  In addition, I now have an issue with the text on the images not reducing proportionally in size with them.  Now the text on the pages look way too large.  Would you be able to assist me with fixing the issue I'm now having with the text?

Again website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Thanks again for all the help!!  🙂 

Add a section under current section and design layout for mobile. Then I will give the code to show this section on mobile only, also hide current banner on mobile

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 8/13/2020 at 9:10 PM, WORKOUTWOLF said:

Yes, it's www.workout-wolf.co.uk

Thank you!

Use this code

@media screen and (max-width: 767px) {
    .homepage #page section:first-child {
        min-height:30vh !important;
        height: 40vh;
        margin-top: 10vh;
    }
}

 

On 8/13/2020 at 6:16 PM, Asiya said:

Vasavikumar.com/meetvasavi

the url doesn't exist

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

Hi There,

I read through this thread and was trying to find a solution for this but with a video instead of an image. I have a youtube video embedded in the hero banner on our homepage. It works OK when on a computer but when in mobile view, it zooms in on the video. I used the maple template and did not use any spacer boxes on either side of the banner, only padding. Any help someone could provide would be extremely appreciated. I've gone nuts looking for a solution the last couple of weeks. 

https://www.geyerdevelopment.com/

Thank you for your time.

Erin

mobile view.PNG

desktop view.PNG

Edited by ErinLeah
Link to comment
12 hours ago, ErinLeah said:

Hi There,

I read through this thread and was trying to find a solution for this but with a video instead of an image. I have a youtube video embedded in the hero banner on our homepage. It works OK when on a computer but when in mobile view, it zooms in on the video. I used the maple template and did not use any spacer boxes on either side of the banner, only padding. Any help someone could provide would be extremely appreciated. I've gone nuts looking for a solution the last couple of weeks. 

https://www.geyerdevelopment.com/

Thank you for your time.

Erin

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#hero-banner figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
section#hero-banner {
    min-height: unset !important;
    height: 50vh;
}
}

 

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 6/3/2020 at 10:11 AM, tuanphan said:

@media screen and (max-width:767px) {
.homepage section:first-child {
    min-height: 30vh !important;
}
}

 

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

Link to comment
On 8/17/2020 at 8:26 AM, tuanphan said:

Use this code


@media screen and (max-width: 767px) {
    .homepage #page section:first-child {
        min-height:30vh !important;
        height: 40vh;
        margin-top: 10vh;
    }
}

 

the url doesn't exist

Hi @tuanphan thank you for doing that. That seems to do the trick. It's slightly higher than we want but if we play about with the height and that it'll make a white line. 

We also need it to happen on the other pages, can you do that at all?

The URL's:

www.workout-wolf.co.uk

www.workout-wolf.co.uk/athletes

www.workout-wolf.co.uk/about

317334831_Screenshot2020-08-20at09_38_49.png.8fa41b8a4207c7cbca8f3827e9745321.png670548286_Screenshot2020-08-20at09_38_42.thumb.png.a09e8db067207abc9b462594c1c8b951.png201353938_Screenshot2020-08-20at09_38_26.png.68c2cd424e8beeb5fe9e3ed5d06d9a08.png1421296586_Screenshot2020-08-20at09_38_17.thumb.png.6488661b25cb7310bc9eb630b848ff51.png1799221274_Screenshot2020-08-20at09_37_52.png.8b513dbcce9f8f1da48f69ee69a21f93.png

Link to comment
10 hours ago, MeToo said:

 

@tuanphan 

Hello, I'm having a similar problem. My Banners on my "Home" & "Price" Page won't resize for mobile viewing. 

https://megalodon-dove-5dga.squarespace.com/config/pages

PW: hairbraiding123

Thanks for all your help!

I see both fine here. Did you find the solution?

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 8/19/2020 at 11:38 PM, Asiya said:

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

I see fine here. It seems you solved?

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

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.