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

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

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
  • 0
On 9/23/2020 at 1:26 AM, adesignw said:

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! 

Can you share site url?

18 hours ago, Embakr said:

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.  
  2. I he 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.
  3. Banner Video has no audio.  Is there any code I could use to give that banner video (located in the homepage Introduction section) audio?
  4. 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.
  5. 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.

Here is how it is supposed to appear:
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

 

Q1. Add to Home > Design > Custom CSS

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

 

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

-- Pour your heart into it

Link to post
  • 0

Thank you for the code.  I tried inputting it in the custom CSS and it only resized the first banner on the homepage (i guess as indicated by the first child - my knowledge of code is extremely limited).  Here is the result (see below).  I know on the mobile version it will use a background image in place of the video (which is totally fine), but is there a setting i could modify to show the entire banner image now that it's resizing for mobile?   Thank you again for your time!!!
IMG_7992.PNG.58431e0e37c07badcef3e5a6fd5ebe4e.PNG
 

Link to post
  • 0
On 9/29/2020 at 5:52 PM, rector-dm said:

@tuanphan I'm having the same problem, with a new index page I created (not the main one on my home screen). I am very much a beginner to CSS, so any suggestions would be really appreciated!

The URL is: https://www.stpaulsdoylestown.org/new-index

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5f72f9dfaa8f925674997281 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#new-page {
    min-height: unset !important;
    height: 140px;
}
}
}

 

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

-- Pour your heart into it

Link to post
  • 0
6 hours ago, cararuetz said:

Hi the same thing is happening on my home page as well...I am using version 7.1 not sure if i need a custom code for my site? Thank you! 

Http://www.cararuetz.com

Add to Home > Design > custom CSS

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

 

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

-- Pour your heart into it

Link to post
  • 0
13 minutes ago, rebeccagleasonphotography said:

Hi I'm having the same issue, I like how it displays on my desktop browser but It's so small and cropped on my mobile, I'd like it to display in portrait mode instead of landscape - can someone help with this?

https://rebeccagleason.com/familyportfolio

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5ed0647eb8dc7749a17d9510 {
section.Intro.Intro--has-image figure img {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
}
section.Intro.Intro--has-image {
    height: 250px;
}
}
}

 

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

-- Pour your heart into it

Link to post
  • 0
On 9/30/2020 at 10:35 AM, tuanphan said:

Add to Home > Design > Custom CSS




@media screen and (max-width:640px) {
body#collection-5f72f9dfaa8f925674997281 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#new-page {
    min-height: unset !important;
    height: 140px;
}
}
}

 

Thank you @tuanphan, that worked! I have two more questions for you, if you don't mind:

1. Is there a code to ensure 100% max width on tablet devices? The width is perfect for mobile and desktop, but still cuts off the left and right sides on tablet.

2. Is there a code to adjust the height in desktop view? The bottom part of the logo is cut off, and can't be seen in parallax mode.

New URL is at https://www.stpaulsdoylestown.org/cid-2020

Thanks again!

Edited by rector-dm
Link to post
  • 0
On 10/3/2020 at 1:53 AM, rector-dm said:

Thank you @tuanphan, that worked! I have two more questions for you, if you don't mind:

1. Is there a code to ensure 100% max width on tablet devices? The width is perfect for mobile and desktop, but still cuts off the left and right sides on tablet.

2. Is there a code to adjust the height in desktop view? The bottom part of the logo is cut off, and can't be seen in parallax mode.

New URL is at https://www.stpaulsdoylestown.org/cid-2020

Thanks again!

@media screen and (max-width:900px) and (min-width:641px) {
body#collection-5f72f9dfaa8f925674997281 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#cid-logo {
    min-height: unset !important;
    height: 350px;
}}
}

 

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

-- Pour your heart into it

Link to post
  • 0

Hello Tuan & Everyone,

The slideshow gallery and image banners on our website www.voodoo-design.com are showing up correctly on mobile browser of my phone. I edited the pictures to be close to 1:1 ratio and it worked on the Squarespace mobile simulator preview. How do I force it to correctly display in 1:1 or original ratio on mobile? Thank you in advance.

 

 

Link to post
  • 0
2 hours ago, VoodooDesign said:

Hello Tuan & Everyone,

The slideshow gallery and image banners on our website www.voodoo-design.com are showing up correctly on mobile browser of my phone. I edited the pictures to be close to 1:1 ratio and it worked on the Squarespace mobile simulator preview. How do I force it to correctly display in 1:1 or original ratio on mobile? Thank you in advance.

So I figured it out for the home page with this code.  How do I apply those code to the other pages?

 

@media screen and (max-width:1080px) {
.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}

2 hours ago, VoodooDesign said:

 

 

 

Link to post
  • 0
10 hours ago, VoodooDesign said:

So I figured it out for the home page with this code.  How do I apply those code to the other pages?

 

@media screen and (max-width:1080px) {
.homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}

 

Edit Page Settings > Advanced > Header > Add this code

<style>
  @media screen and (max-width:1080px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}
</style>

 

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

-- Pour your heart into it

Link to post
  • 0
20 hours ago, tuanphan said:

Edit Page Settings > Advanced > Header > Add this code


<style>
  @media screen and (max-width:1080px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}
</style>

 

Thank you Tuan! 

 

How about for products. This product is not showing up correctly on mobile.

 

https://www.voodoo-design.com/mclaren/p/m-engineering-m-tuner-m838t-suite-mclaren-570gt

Link to post
  • 0
20 hours ago, tuanphan said:

Edit Page Settings > Advanced > Header > Add this code


<style>
  @media screen and (max-width:1080px) {
.gallery-fullscreen-slideshow[data-width="full-bleed"] {
    height: 30vh !important;}}
</style>

 

Also what is the difference between this method adding it in the headers vs into the css?

Link to post
  • 0

Hi Tuan, 

Thank you for the assistance so far with getting the galleries properly displaying throughout the site. Please help with these issues below.

1. How do we get the mobile browsers to properly display images that are not 3:4 ratio like for this product listing.

https://www.voodoo-design.com/mclaren/p/m-engineering-m-tuner-m838t-suite-mclaren-570gt-2d8gd

2. How do we get the the static images (non gallery) to properly display throughout the site on a mobile browser?

https://www.voodoo-design.com/home

Screenshot_20201007-001056_Chrome.jpg

Screenshot_20201007-001044_Chrome.jpg

Edited by VoodooDesign
Link to post
  • 0
On 10/6/2020 at 11:36 AM, VoodooDesign said:

Also what is the difference between this method adding it in the headers vs into the css?

Page Header. You need a Business Plan or higher.

If you use code for multiple pages, I usually recommend inserting it in the Page Header, so you can easily find the code in the future.

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

-- Pour your heart into it

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