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

Banner Image Won't Resize for Mobile View


TheIDBootCamp
Go to solution Solved by tuanphan,

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 post
  • Answers 252
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@media screen and (max-width:640px) { [data-section-id="5e5d461757cae6512002d1c0"] .section-background img { width: 100% !important; height: auto !important; } }  

Add to Home > Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5e5c9aff118337590dcf052e"] { min-height: 40vh !important; } }  

Remove your code & use this code @media screen and (max-width: 767px) { .homepage #page section:first-child { min-height: unset; height: 30vh; } }   This is a

Posted Images

Recommended Posts

  • 0
On 9/7/2020 at 5:01 PM, Crenative said:

Hi there,

Any help possible for my site?

Images looks nice on desktop but mobile is cropped to almost unusable, which force me to only use the centre portion.

Otomo - Car Rental in Indonesia

Thanks in advance!

Hi. You mean homepage top banner?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
On 8/29/2020 at 7:26 AM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#welcome-1 {
    min-height: unset !important;
    height: 210px !Important;
}
.homepage .Parallax-item:first-child {
    height: 200px !important;
}
}

 

Thank you so much for your help, however, I'm still facing the same issue after placing the code...

Link to post
  • 0
17 hours ago, DuvalStreetMedia said:

I am having the same issue as some, I used a code to change the banner size on mobile, but now there is a big blank space below. My site is www.conchjeweler.com  could you please help me as well!? THANK YOU IN ADVANCE!

Remove your code & use this code

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

 

11 hours ago, Crenative said:

Yes, the homepage top banner.

 

Thanks in advance!

This is a bit complex. I will check again tomorrow

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
On 9/7/2020 at 3:02 PM, tuanphan said:

Add to Home > Design > Custom CSS


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

 

Thank you so much, it works on the homepage!

I need another help on other pages. I have tried changing some of the code but didn't work. Really appreciate if you can help with these too.

1. https://disc-mustard-35hy.squarespace.com/karir
2. https://disc-mustard-35hy.squarespace.com/cerita-sukses
Password: ahawebsite123

The top banner on mobile is cropped too much. I want it to show more just like what you did for the homepage. 

Thank you so much!

 

 

Screen Shot 2020-09-10 at 13.15.16.png

Screen Shot 2020-09-10 at 13.15.28.png

Screen Shot 2020-09-10 at 13.15.45.png

Screen Shot 2020-09-10 at 13.15.37.png

Link to post
  • 0
5 hours ago, inairdaaksiram said:

Thank you so much, it works on the homepage!

I need another help on other pages. I have tried changing some of the code but didn't work. Really appreciate if you can help with these too.

1. https://disc-mustard-35hy.squarespace.com/karir
2. https://disc-mustard-35hy.squarespace.com/cerita-sukses
Password: ahawebsite123

The top banner on mobile is cropped too much. I want it to show more just like what you did for the homepage. 

Thank you so much!

Add to Karir, Cerita Pages Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
#page section:first-child {
    min-height: unset;
    height: 30vh;
    margin-top: 10vh;
}
}
</style>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

Hi everyone i'm new here with no experience of css. I'm having a similar issue with most people, I'm using the Kester template and I'm on trial for 14 days. My portfolio is currently in private mode

1) my header is overlapping my banner image. I used a headline block but the results are the same if i use an image block. I want my banner to sit flush under the header but nothing is helping me do that.

1.thumb.png.2a6e5780381c20bed4f772e911b9677e.png

2) I'd like my banner to display the full image on mobile but it's resizing all weird.

2.png.8b3d17923f184cb72ae5d16f9e8a1033.png

Appreciate any help I can get thanks!

Link to post
  • 0
On 9/10/2020 at 11:30 PM, rosesntattoos said:

Hi everyone i'm new here with no experience of css. I'm having a similar issue with most people, I'm using the Kester template and I'm on trial for 14 days. My portfolio is currently in private mode

1) my header is overlapping my banner image. I used a headline block but the results are the same if i use an image block. I want my banner to sit flush under the header but nothing is helping me do that.
2) I'd like my banner to display the full image on mobile but it's resizing all weird.

Appreciate any help I can get thanks!

Can you share link to page in screenshot? We can check easier.

If your site is trial, you can setup password & share url

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
7 minutes ago, rosesntattoos said:

Ah thanks! @tuanphan didn't know that 

https://dog-lynx-5asp.squarespace.com/

password: thanks

Add to Home > Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 20vh;
    margin-top: 10vh;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
14 hours ago, Donzu said:

Hi, @tuanphan! My site is having the same issue with the homepage banner. If you can help me I'd greatly appreciate it. Website is staysnaz.com. Thanks in advance!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#feature {
    height: 275px !important;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
4 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


/* resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 20vh;
    margin-top: 10vh;
}
}

 

Thanks so much!! would you know how to push the banner down or add spacing so that the header is not overlapping or cropping my banner?

Link to post
  • 0
2 minutes ago, rosesntattoos said:

Thanks so much!! would you know how to push the banner down or add spacing so that the header is not overlapping or cropping my banner?

change number 10 & 20

Edited by tuanphan

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
5 minutes ago, tuanphan said:

change number 10

Thanks! it works on mobile! But it doesn't reflect in the full web browser, how could I edit the css to do reference the full browser? or only affect the browser version?

Edited by rosesntattoos
Link to post
  • 0
12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#feature {
    height: 275px !important;
}
}

 

This worked, thanks for the help!

Link to post
  • 0
On 9/13/2020 at 3:31 PM, rosesntattoos said:

Thanks! it works on mobile! But it doesn't reflect in the full web browser, how could I edit the css to do reference the full browser? or only affect the browser version?

Do you still need help on this?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@tuanphan I am having a similar issue with my banner getting cut off on mobile as well.   I'm not necessarily expecting to get the same ratios as on the desktop, but I'd at least like more of it showing.  I've tried inserting codes and putting the block id for the banner in there, but I must be doing something wrong because it has no effect on it.

https//:www.madeleinedeighanphotography.com/

 

websample.jpg

119732993_775109139951933_5344635618130759790_n.jpg

Edited by maddei
Link to post
  • 0
On 9/20/2020 at 2:41 AM, maddei said:

@tuanphan I am having a similar issue with my banner getting cut off on mobile as well.   I'm not necessarily expecting to get the same ratios as on the desktop, but I'd at least like more of it showing.  I've tried inserting codes and putting the block id for the banner in there, but I must be doing something wrong because it has no effect on it.

https//:www.madeleinedeighanphotography.com/

I think you need new image on mobile only.

Add to Home > design > custom CSS

@media screen and (max-width:640px) {
section#new-page-2 figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

I'm having the same banner image cropping issue on mobile devices. I've gone through as many forums and blog posts that I could find in search of a fix and haven't been able to get any CSS to work (I am very much an amateur, so definitely still learning!). Here is the site on desktop, Squarespace mobile preview  (also how it looks on some mobile devices I've checked - very cropped), and on my own phone (not cropped at all). I'd like her full body to be in view on all mobile devices. Can anyone help? Thank you! 

Screen Shot 2020-09-22 at 2.20.58 PM.png

Screen Shot 2020-09-22 at 2.21.15 PM.png

Screen Shot 2020-09-22 at 2.25.08 PM.png

Edited by adesignw
Link to post
  • 0

Hello Tuan Phan! I’ve been following the thread and am really in need of your assistance. I tried contacting squarespace support previously but they were only able to give me general advice and at this point I need specific help.

My site is www.evenbetterinsurance.com
It’s a 7.0 brine family - Nueva template.

  1. Banner Images and Banner Videos (currently only have 1 banner video on the top of the homepage) site-wide do not scale for mobile.  

FmNFcnQU6XdOOmlfn06efcdQ5eXEbJ2k9VQHOPUhfUvM4ip-UTEh7n_krD8m_CfRTZyuomZx_pLU-VuwON9tcZGsXJbrCpLe1Dg0Wgtlv9RtioEbnEzJPWWBTKNsjPWbAv8Q5Fze

RgchgDbDVLz6RvxvKy0OOajQuX3OC-gIzuMK3c4bQFAL-Kpn2OomZpCIy8QEoVAIwRS09AQ3tackiithFNwDFMDIA7VaIPGUxsgi_jbvNSRT8vbx2qJK7F-AbYEzcwzNksvwrbvf

 

  1. I have been following this thread for a few weeks now and the previous code you’ve given out has fixed the mobile resize issue but has also introduced a huge blank space beneath the banners sitewide.
  2. Banner Video has no audio.  Is there any code I could use to give that banner video (located in the homepage Introduction section) audio?
  3. Banner Size (specifically for homepage introduction section banner video) tends to cut off text of video.  I’ve tried to increase the banner minimum height in the site styles section but it hasn’t helped too much.
  4. Incorrectly Bolded Text.  It only happens on this ‘New to Medicare’ page.  The entire text is supposed to be non-bold. However when I preview the site as public it is bold.
    tnE4gHITaup6Xym6tSwKwUAyprEfRx4fDY9mEwZzP8svCnoXykgTug97uhxWdTe1Xru0YoW1EJ9FGaicspcfvkSq9wD-srhZ8nVr7GNiwCmJ0bPhfn72i8UWMTI_48t7maru72xT

Here is how it is supposed to appear:

zSZAIVvjbdjQ3IonAJcCNKG8TGlQf2RAFtKrkARGkWDCWXyTaQgZKmXaiG4G42TcMepkhGzw81SXjWbyo54rNVSl6Z8ELyi5JLYF_Dp00eWIweiCaNnxdyQS__D_uvh9Juwapfzs
I really appreciate your time for taking a look and your assistance.  I’m running my own business and have done my best to figure it out but am at my wit’s end.

Cheers

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...