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

Dr Cabin banner? Add to Design > Custom CSS

/* resize home top mobile banner */
@media screen and (max-width:767px) {
[data-section-id="60ce060627e9d9469bf70cc3"] {
    min-height: unset !important;
    height: 60vh;
}
}

 

Thank you @tuanphan that worked! What do I have to change to get this to work on the other pages?

 

Link to comment
  • 0
4 hours ago, socialanxietydoctor said:

Thank you @tuanphan that worked! What do I have to change to get this to work on the other pages?

 

Hi. Can you share link to all pages where you have problem?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 7/11/2021 at 10:47 PM, socialanxietydoctor said:

Add this code to 3 page Headers

<style>
  /* resize home top mobile banner */
@media screen and (max-width:767px) {
article section:first-child {
    min-height: unset !important;
    height: 60vh;
}
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 7/27/2020 at 12:26 PM, Wanderdoll said:
<style>
  @media screen and (max-width:640px) {
  .banner-thumbnail-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
  }
</style>

HI @tuanphan

I tried several of the codes posted but nothing works. Two of the images on the tablet and mobile versions are too cropped. I would like the whole couch to show, and the whole flower.

 I've spent hours researching online too but I can't find an answer.

here's my site address:

https://raspberry-ladybug-nhm8.squarespace.com/config/pages

 

Thank you for your help.

Screen Shot 2021-07-13 at 11.17.08 PM.png

1954278542_ScreenShot2021-07-13at11_19_10PM.thumb.png.baefadb0c4e9f99d067187df7d40e8fb.png

1948501950_ScreenShot2021-07-13at11_19_17PM.thumb.png.be6196aa4e26af9c83d4f8f2ae27c1a0.png

Screen Shot 2021-07-07 at 9.48.28 AM.png

Link to comment
  • 0
On 7/16/2021 at 11:16 AM, Val1209 said:

HI @tuanphan

I tried several of the codes posted but nothing works. Two of the images on the tablet and mobile versions are too cropped. I would like the whole couch to show, and the whole flower.

 I've spent hours researching online too but I can't find an answer.

here's my site address:

https://raspberry-ladybug-nhm8.squarespace.com/config/pages

 

Thank you for your help.

Screen Shot 2021-07-13 at 11.17.08 PM.png

1954278542_ScreenShot2021-07-13at11_19_10PM.thumb.png.baefadb0c4e9f99d067187df7d40e8fb.png

1948501950_ScreenShot2021-07-13at11_19_17PM.thumb.png.be6196aa4e26af9c83d4f8f2ae27c1a0.png

Screen Shot 2021-07-07 at 9.48.28 AM.png

Hi. What is access password?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 7/11/2021 at 10:47 PM, socialanxietydoctor said:

Do you want to fix these?

Site URL – https://www.socialanxietydoctor.com/

1. (Mobile – Footer) Telephone number is cut into 2 lines.

https://www.socialanxietydoctor.com/

socialanxietydoctor.com-01-min.png

2. (Mobile – Menu) Increase space between lines?

https://www.socialanxietydoctor.com/

socialanxietydoctor.com-02-min.png

3. (Mobile – About) Increase text width?

https://www.socialanxietydoctor.com/drfitch

socialanxietydoctor.com-03-min.png

4. (Tablet – Homepage) On desktop, the whole picture can be seen. On Tablet, the image is partially cropped.

https://www.socialanxietydoctor.com/

socialanxietydoctor.com-04-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
10 hours ago, chris.lrs said:

Hi @tuanphan

Having similar issues with multiple headers on this site.  Good example page - 

 

https://amphibian-orange-ze4h.squarespace.com/youth

Pass: KCF2021

If you can help me with code on one - I can most likely figure out the rest.  Thank you!

Use this CSS

/* Youth page mobile top banner */
@media screen and (max-width:640px) {
section#youth-header figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}

section#youth-header {
    min-height: unset !important;
    height: 250px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Use this CSS

/* Youth page mobile top banner */
@media screen and (max-width:640px) {
section#youth-header figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}

section#youth-header {
    min-height: unset !important;
    height: 250px;
}
}

Works like a charm - thank you!!!!

 

 

Link to comment
  • 0
15 hours ago, SamanthaS said:

Can you help to make the banner image on this page fixed on mobile?

https://houseworkscollective.com/our-team

Thanks!

Add to Design > custom CSS

/* Our team banner image on mobile */
@media screen and (max-width:767px) {
[data-section-id="60c8f08f40e2594d5fc7ebec"] {
    min-height: unset !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 7/20/2021 at 12:05 AM, chris.lrs said:

Hi @tuanphan

Having similar issues with multiple headers on this site.  Good example page - 

 

https://amphibian-orange-ze4h.squarespace.com/youth

Pass: KCF2021

If you can help me with code on one - I can most likely figure out the rest.  Thank you!

Do you need to fix these?

Site URL – https://amphibian-orange-ze4h.squarespace.com/

1. (Mobile – Homepage) Remove the white space at the bottom of page?

https://amphibian-orange-ze4h.squarespace.com/

amphibian-orange-ze4h.squarespace.com-01

2. (Mobile – Menu) Reduce space between KCF connect and Contact.

https://amphibian-orange-ze4h.squarespace.com/

amphibian-orange-ze4h.squarespace.com-02

3. (Tablet – Header) Menu is cut into 2 lines.

https://amphibian-orange-ze4h.squarespace.com/

amphibian-orange-ze4h.squarespace.com-03

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 7/22/2021 at 2:52 AM, tuanphan said:

Add to Design > custom CSS

/* Our team banner image on mobile */
@media screen and (max-width:767px) {
[data-section-id="60c8f08f40e2594d5fc7ebec"] {
    min-height: unset !important;
}
}

 

Thank you!

Link to comment
  • 0
On 7/28/2021 at 12:52 AM, jsn913 said:

Hi there @tuanphan,

Same issue here, tried your code to decrease the size of the banner image and it left a huge gap.  Thanks so much for all your help.  Let me know if you need anything else.

https://www.mckinleyjames.com/

Screen Shot 2021-07-27 at 12.52.27 PM.png

Hi. Remove code you added & let me know. I will check again & give new code

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 8/9/2021 at 9:01 PM, Eunoia said:

Hi. I answered your message. You can check it again

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
21 hours ago, BraesideGC said:

@tuanphan Hi, TuanPhan, where do you find the data section IDs? e.g.

[data-section-id="60c8f08f40e2594d5fc7ebec"]

 

Use this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
On 9/25/2021 at 12:43 AM, AllenMichael said:

@tuanphan I have looked through this thread and nothing has helped me. My I have multiple banners on my page and I need to resize them for mobile. The page URLs is https://www.allenmichaelmedia.com/photo and https://www.allenmichaelmedia.com/video. Any help would be greatly appreciated.

Add to Design > Custom CSS > Then save & reload the site

/* Resize mobile banner */
@media screen and (max-width:767px) {
/* Photo */
[data-section-id="614cb2d15caf8717459866df"] {
    min-height: unset !important;
    height: 30vh !important;
}
}

It looks like you solved Video page?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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