Jump to content

Banner Image Won't Resize for Mobile View

Go to solution Solved by tuanphan,

Recommended Posts

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

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

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

Screen Shot 2020-07-02 at 7.00.03 pm.png

Screen Shot 2020-07-02 at 6.59.50 pm.png

Link to comment
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

 

 

Link to comment
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;
}
}

 

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

Link to comment
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..?

Link to comment

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

Link to comment
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;
}
}

 

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

Link to comment

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;
}
}
Link to comment
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;
}
}

 

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

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 

Screen Shot 2020-07-10 at 2.31.45 PM.png

Screen Shot 2020-07-10 at 2.31.56 PM.png

Screen Shot 2020-07-10 at 2.32.09 PM.png

Screen Shot 2020-07-10 at 2.32.21 PM.png

Link to comment

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?

Link to comment
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;
}
}

 

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

Screen Shot 2020-07-14 at 2.26.39 PM.png

Screen Shot 2020-07-14 at 2.26.49 PM.png

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.