Jump to content

Banner Image Won't Resize for Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

22 hours ago, socialanxietydoctor said:

Hi @tuanphan,

I am having the same issue where my background image looks fine on desktop, but is cutoff on mobile. Tried to use code you posted earlier, but it left a big gray space between the picture and text. Any code to fix this? URL is www.socialanxietydoctor.com

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.