Banner Image Won't Resize for Mobile View

11 hours ago, MHOLLAND said:

Hello! 

I too am having this issue where the banner looks great on desktop but then is cut off on mobile.

I have tried all of the above Custom CSS. This website has a banner that is image/video on every page.

 

Try adding to Page Settings > Advanced > Header

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

you can adjust 40vh

Hi guys, I have the same issue on my site ... www.mapletoniga.com.au. On the home page main image doesn't resize correctly, which cuts people out of the hero image. If anyone can help with code, it would be much appreciated. I've tried the above code but the best result I could achieve still left grey space under the photo, so it didn't look right. You can see screenshots below ... 

On 7/1/2020 at 10:35 AM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Thanks @tuanphan - unfortunately that hasn't worked. The video is still cropping. I'm using squarespace 7 .1 if that makes any difference? 

I'd also like to apply the same to the background banner video that appears half way down the page, if we can get this to work. I.e to force 100% width

5 hours ago, cameronoutridge said:

Hi guys, I have the same issue on my site ... www.mapletoniga.com.au. On the home page main image doesn't resize correctly, which cuts people out of the hero image. If anyone can help with code, it would be much appreciated. I've tried the above code but the best result I could achieve still left grey space under the photo, so it didn't look right. You can see screenshots below ... 

16 minutes ago, samasplen said:

Thanks @tuanphan - unfortunately that hasn't worked. The video is still cropping. I'm using squarespace 7 .1 if that makes any difference? 

I'd also like to apply the same to the background banner video that appears half way down the page, if we can get this to work. I.e to force 100% width

 

 

 

Add to Home > Design > Custom CSS

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

38 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Thanks so much! That's done the job with a bit of tweaking to the margins!

Like I say, is there anyway to do the same to the video half way down the page? I thought changing the section to 'third-child' might work but no dice

try :nth-child(3) or :nth-child(4) or :nth-child(5)

...

19 minutes ago, tuanphan said:

try :nth-child(3) or :nth-child(4) or :nth-child(5)

...

Thanks @tuanphan and sorry for the constant questions, :nth-child(3) does seem to effect the correct section, but it doesn't force the width to stay 100% on mobile. I can only seem to manipulate the height spacing and margins..?

15 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Thanks so much tuanphan. It worked for me!

On 7/3/2020 at 6:48 AM, cameronoutridge said:

Thanks so much tuanphan. It worked for me!

 

Hi I've tried previous code and it hasn't worked for me. 

@tuanphan any help would be hugely appreciated. ethical-nutrition.com

Hello Squarespace Community!

I've read through all of the posts and have not yet been able to find a code that fixes this issue.....

@tuanphan you seem to be the hero around here but I would love if anyone is able to solve my resizing issue!

My website is www.magpieshines.com - the banner image cuts off on mobile compared to desktop!

Thanks in advance!!!!

So I have a photo layered on top of the background.

I can't figure out how to make the top layer images also optimize so its not covering the banner images.I might be asking for alot. But i want the layer images text to move lower on the banner image.

https://briananelson.squarespace.com/

Password: briana

On 7/3/2020 at 10:06 PM, GraceENC said:

Hi I've tried previous code and it hasn't worked for me. 

@tuanphan any help would be hugely appreciated. ethical-nutrition.com

It seems fine here. Did you solve?

On 7/4/2020 at 5:22 AM, Magpieshines said:

Hello Squarespace Community!

I've read through all of the posts and have not yet been able to find a code that fixes this issue.....

@tuanphan you seem to be the hero around here but I would love if anyone is able to solve my resizing issue!

My website is www.magpieshines.com - the banner image cuts off on mobile compared to desktop!

Thanks in advance!!!!

Add to Home >Design > Custom CSS

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

21 hours ago, iamsashar said:

So I have a photo layered on top of the background.

I can't figure out how to make the top layer images also optimize so its not covering the banner images.I might be asking for alot. But i want the layer images text to move lower on the banner image.

https://briananelson.squarespace.com/

Password: briana

Try adding to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    padding-top: 50vw !important;
}
}

15 hours ago, tuanphan said:

It seems fine here. Did you solve?

 

Unfortunately not. I've actually had to use this work around by creating another banner page.

/* show home page block dependent on screen size */ 
@media only screen and (max-width: 780px) { #home-banner { display: none; } } 
@media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } }

I would really like to avoid this. 

Here is the new banner I would like to switch to my homepage:

https://ethical-nutrition.com/new-index

Please can you advise on resizing if this banner were the homepage banner? Many thanks

Hi I added the following code, and it seems to have fixed the issue on the main home page on mobile, but the rest of the pages the images still get cut off on mobile if they are full width (both in banner) and any further down on the page. Is there a way to fix it so that all images across my website do not get cut-off on mobile? Thank you!

Website: www.portlandprofessionaldoulas.com

This is the code I added: 

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

On 7/6/2020 at 11:56 AM, GraceENC said:

Unfortunately not. I've actually had to use this work around by creating another banner page.

/* show home page block dependent on screen size */ 
@media only screen and (max-width: 780px) { #home-banner { display: none; } } 
@media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } }

I would really like to avoid this. 

Here is the new banner I would like to switch to my homepage:

https://ethical-nutrition.com/new-index

Please can you advise on resizing if this banner were the homepage banner? Many thanks

above link doesn't have banner..

5 hours ago, portlandprofdoulas said:

Hi I added the following code, and it seems to have fixed the issue on the main home page on mobile, but the rest of the pages the images still get cut off on mobile if they are full width (both in banner) and any further down on the page. Is there a way to fix it so that all images across my website do not get cut-off on mobile? Thank you!

Website: www.portlandprofessionaldoulas.com

This is the code I added: 

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

try this

@media screen and (max-width:767px) {
#page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top: 90px;
}
}

Hi @tuanphan, I have read through this entire thread trying to figure out what I can do to improve the mobile view of my website home page. I have tried several CSS codes, but with little success. 

Here is the URL: https://www.nextlevel-usa.org/ 

Below are screen shots of the issue. I need each banner on the home page to resize for mobile. 

Is there a code that you know to help fix this issue? We use a 7.0 Brine template 

@tuanphan thank you so much! Fixed it and you're an absolute saint! 

I may be changing the image soon because we got new labels, ill reach out for anymore assistance! Bless you!

Hi there I am having the same issue except I would like to extend the size of my background section.... I would like it to be taller so that the text overlapping has more space. 

Does anyone have the code for me please?

@tuanphan

I am having the same issue with my desktop vs mobile site. 
 

cubicle2cloudsaviation.com

I tried the original coding and it resized my image correctly but also gave me the large gap underneath it. When I tried the coding that was supposed to fix the issue, it didn't work for me. Any advice?

On 7/13/2020 at 8:43 AM, CocosAtelier said:

Hi there I am having the same issue except I would like to extend the size of my background section.... I would like it to be taller so that the text overlapping has more space. 

Does anyone have the code for me please?

Can you share link?

6 hours ago, laurenowden said:

I tried the original coding and it resized my image correctly but also gave me the large gap underneath it. When I tried the coding that was supposed to fix the issue, it didn't work for me. Any advice?

Can you share link?

8 hours ago, Thomasheater said:

@tuanphan

I am having the same issue with my desktop vs mobile site. 
 

cubicle2cloudsaviation.com

 

Add to Home > Design > Custom CSS

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

44 minutes ago, tuanphan said:

@tuanphan Thank you very much! it almost worked but I had to change it to 30vh height and min-height. Now my text is kind of smashed together on the mobile version only. Can I do something to fix that or should I rearrange the text? 

www.cubicle2cloudsaviation.com

8 hours ago, tuanphan said:

Can you share link?

 

Can you share link?

Add to Home > Design > Custom CSS

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

 

Hi @tuanphan, I have noticed you have helped a lot of people fix their banners on their mobile site. I have tried a few different codes of yours I have found with no changes. If it helps, I use the Sonora template. Can you help me? My website link is lemonandhoneyphotos.com

@tuanphan really appreciate you helping everyone. Is there maybe a template we could all use or is it on a site by site basis? I'm having a similar issue where I want my mobile banners to not cut off. I want it so either specifically the home page banner video is not cut off or all banners are not cut off. I'm using the 7.0 Hayden Squarespace template for reference.

Hello 🙂 
I am also having the same issue. One of the first codes worked for me but left white space. I am having an issue with my blog and about pages.

https://www.thevulnerablevirago.com/