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

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

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 post
  • 0
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 post
  • 0
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;
}
}

 

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
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 post
  • 0
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 post
  • 0
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!

 

Link to post
  • 0

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 post
  • 0
Posted (edited)

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

 

Screen Shot 2020-07-04 at 11.29.23 AM.png

Edited by iamsashar
Link to post
  • 0
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;
}
}

 

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
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 post
  • 0

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 post
  • 0
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;
}
}

 

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

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 post
  • 0

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?

Link to post
  • 0

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 post
  • 0
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;
}
}

 

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

 

Link to post
  • 0
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 post
  • 0

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

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

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

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