Banner Image Won't Resize for Mobile View

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

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

Hi Tuan! The url is https://www.evenbetterinsurance.com/

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

 

@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

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

On 9/27/2020 at 1:19 PM, Embakr said:

Hi Tuan! The url is https://www.evenbetterinsurance.com/

Do you still need help on this?

Yes please i still need help.  I just emailed you.  Thank you Tuan!

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

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

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

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

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

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!

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

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.

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:

 

 

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>

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

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?

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

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.

Add to Page Settings > Advanced > Header

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

Tuanphan, I am having the same issue with the image on my Blog page on mobile.  You can see it here:

http://www.extremeelectronics.net/blog-1

On the computer, it displays fine, but on mobile, it just shows the LO in BLOG.  If you don't mind helping me with this, I would very much appreciate it.

7 hours ago, golovemd said:

Tuanphan, I am having the same issue with the image on my Blog page on mobile.  You can see it here:

http://www.extremeelectronics.net/blog-1

 

On the computer, it displays fine, but on mobile, it just shows the LO in BLOG.  If you don't mind helping me with this, I would very much appreciate it.

I remember I answerd this problem on another post.

Add to Blog Page Settings > Advanced > Header

(If you use Personal Plan > Edit Blog Page > Add Code Block > Paste below code)

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