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

Banner Image Won't Resize for Mobile View


TheIDBootCamp

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 comment

Recommended Posts

  • 0

Site URL: http://charlielangton.com

Hi @tuanphan,

I have been having the same problem os most people here. I have tried 10 codes posted here before but none fix the problem on my website. Could someone please help? I already deleted most of the footer with my boyfriend's infos thinking it would fix it, but it didn't, sadly. This white blank space is really bothering us.

Thank you very much in advance,

Erika

Screenshot 2021-02-09 at 10.50.18.png

Screenshot 2021-02-09 at 10.50.35.png

Link to comment
  • 0
1 minute ago, emr10 said:

Site URL: http://charlielangton.com

Hi @tuanphan,

I have been having the same problem os most people here. I have tried 10 codes posted here before but none fix the problem on my website. Could someone please help? I already deleted most of the footer with my boyfriend's infos thinking it would fix it, but it didn't, sadly. This white blank space is really bothering us.

Thank you very much in advance,

Erika

Screenshot 2021-02-09 at 10.50.18.png

Screenshot 2021-02-09 at 10.50.35.png

Or also, is it also possible to make this image larger on the mobile? to show more top and bottom?

Link to comment
  • 0
1 hour ago, emr10 said:

Site URL: http://charlielangton.com

Hi @tuanphan,

I have been having the same problem os most people here. I have tried 10 codes posted here before but none fix the problem on my website. Could someone please help? I already deleted most of the footer with my boyfriend's infos thinking it would fix it, but it didn't, sadly. This white blank space is really bothering us.

Thank you very much in advance,

Erika

Screenshot 2021-02-09 at 10.50.18.png

Screenshot 2021-02-09 at 10.50.35.png

First, remove your code (this code for SS 7.0, your site is 7.1)

@media screen and (max-width: 640px) {
    .Parallax-item:first-child img {
        width:100% !important;
        height: auto !important;
        left: 0 !important;
        top: 0 !important;
    }

    section#about-intro {
        min-height: unset !important;
        height: 180px;
    }
}

Add this new code

/* resize home top banner mobile */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 90vh;
}
body.homepage #page section:first-child img {
    object-position: 15% !important;
}
}

image.thumb.png.3df2d501cca0e2264b1ac85239fdc8cc.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
10 hours ago, MariaFY said:

Hi there,

I'm hopping on this thread trying to figure out how I can resize my Index page banners on mobile only. I like them full screen (110vh) on desktop, but on mobile the images don't work well. 

@tuanphan Is this an easy one? I played with css but didn't come to a working solution.

Site: https://koala-saxophone-dd8b.squarespace.com/

PW: haiku

 

Muchas gracias Circle familia!

Add to Design > Custom CSS

/* resize  home mobile banner */
@media screen and (max-width:640px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#new-page-3 {
    min-height: unset !important;
    height: 250px;
}
section#new-page-3 * {
    font-size: 20px;
}
div#block-yui_3_17_2_1_1611282973245_7194 {
    margin-top: 100px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
21 hours ago, capitaltimberco said:

Thanks!

On the "About us" page there are 2 more images as you scroll down.

On the "Arboriculture" page the sliding gallery at the top of the page is cropped as well as on the "saw-milling" and "contact" page.

Thanks for all the help!

arb.thumb.PNG.bd718779039b6b62b250f3b57267be87.PNG

boules.PNG

contact.PNG

owners.PNG

sawmill.PNG

Add to About Us Page Header

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:nth-child(2) img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
    section#quote {
    height: 180px !important;
    min-height: unset;
}
  }
</style>

Other images. Next comment

https://www.capitaltimbercompany.ca/about-us

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
5 hours ago, tuanphan said:

Add to About Us Page Header


<style>
  @media screen and (max-width:640px) {
  .Parallax-item:nth-child(2) img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
    section#quote {
    height: 180px !important;
    min-height: unset;
}
  }
</style>

Other images. Next comment

https://www.capitaltimbercompany.ca/about-us

Thanks!

This worked, however I do not see the "next comment" for the other images. I appreciate all the help!

Link to comment
  • 0
On 2/12/2021 at 12:32 AM, SouthernSunEvents said:

Hi @tuanphan

I've also been going through all of these codes and trying my hand at this without success. My home page has 3 banner images with large text overlays that I need to size down for mobile view. 

Website is www.southernsunevents.com

Password: sse2020

I so appreciate you helping all of us!

It looks like you solved with this code?

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#about-intro {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/11/2021 at 5:00 AM, MariaFY said:

Hi @tuanphan, thanks, this code worked super well, and I'm trying to resize other index page banners on the site as well. On the second banner on the homepage, there's a gray bar that shows when scrolling. Do you know why this occurs, or a way to fix it? 

 

Thanks a lot, appreciate the help!

505351945_ScreenShot2021-02-10at11_59_51AM.png.ced9b52c36008bdafb2921091febbe6e.png

site: https://koala-saxophone-dd8b.squarespace

PW: haiku

Can you share link to all pages? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/10/2021 at 12:14 AM, capitaltimberco said:

Thanks!

This worked, however I do not see the "next comment" for the other images. I appreciate all the help!

Arboriculture

Can you disable autoplay?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/14/2021 at 3:43 AM, tuanphan said:

!

Hey @tuanphan,

Thanks for looking into this. I made some progress on Saturday but now have the following issues:

- Image 1 parallax is disabled while the other 2 images are active. I used the code found thinking it would disable all because I read it's easier to manage overlay text this way but for some reason it's just disabling the first image. I'd like to keep all parallax enabled if possible but at this point just looking for the simplest solution. 

- Text under image 1 is overlapping. Working on trying to figure this out right now. Seeing this is header 2 font and I need this section it different from the others. Same problem with images. All header 1 font but each photo requires different size fonts. Not sure where to go from here. 

- Image 1 text is cut off. There's a quote author listed at the bottom but it seems the spacing is bringing it down too far off or that text is not header linked. 

Thanks so much!

Edited by SouthernSunEvents
Link to comment
  • 0
On 2/15/2021 at 11:12 PM, SouthernSunEvents said:

Hey @tuanphan,

Thanks for looking into this. I made some progress on Saturday but now have the following issues:

- Image 1 parallax is disabled while the other 2 images are active. I used the code found thinking it would disable all because I read it's easier to manage overlay text this way but for some reason it's just disabling the first image. I'd like to keep all parallax enabled if possible but at this point just looking for the simplest solution. 

- Text under image 1 is overlapping. Working on trying to figure this out right now. Seeing this is header 2 font and I need this section it different from the others. Same problem with images. All header 1 font but each photo requires different size fonts. Not sure where to go from here. 

- Image 1 text is cut off. There's a quote author listed at the bottom but it seems the spacing is bringing it down too far off or that text is not header linked. 

Thanks so much!

Which code did you use?

On 2/16/2021 at 3:13 PM, studiodelphine said:

Screen shots are below

Screen Shot 2021-02-16 at 1.11.45 AM.png

Screen Shot 2021-02-16 at 1.11.24 AM.png

Can you share url? Topic has too many comments and I cannot remember each person's site url.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
3 hours ago, tuanphan said:

Which code did you use?

Can you share url? Topic has too many comments and I cannot remember each person's site url.

So sorry. I'm still getting the hang of this forum stuff.

Site: www.southernsunevents.com

Password: sse2020

Code I used for header fonts (in Design-Custom CSS):

@media screen and (max-width: 640px) {
  h1 {
    font-size: 25px;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 15px;
  }
}

Code used for banner image resizing/parallax (in Home-Advanced):

 

<style>
.Header-branding {    
display: block;    
max-width: 100%;    
max-height: 300px;    
content: url("https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601967383a680b21c6600059/1612277561071/logo+1+in+white+text++-01.png") !important;

/* if logo needs to be centered */
    margin-left: auto;    
    margin-right: auto;
  }
</style>

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#about-intro {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#explore-our-work {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#quote {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

 

Edited by SouthernSunEvents
Link to comment
  • 0
On 2/18/2021 at 1:01 PM, SouthernSunEvents said:

So sorry. I'm still getting the hang of this forum stuff.

Site: www.southernsunevents.com

Password: sse2020

Code I used for header fonts (in Design-Custom CSS):

@media screen and (max-width: 640px) {
  h1 {
    font-size: 25px;
  }
  h2 {
    font-size: 30px;
  }
  h3 {
    font-size: 15px;
  }
}

Code used for banner image resizing/parallax (in Home-Advanced):

 

<style>
.Header-branding {    
display: block;    
max-width: 100%;    
max-height: 300px;    
content: url("https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601967383a680b21c6600059/1612277561071/logo+1+in+white+text++-01.png") !important;

/* if logo needs to be centered */
    margin-left: auto;    
    margin-right: auto;
  }
</style>

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#about-intro {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#explore-our-work {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

<style>
  @media screen and (max-width:640px) {
  .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
    .Parallax-item:first-child figure {
    transform: unset !important;
}
    section#quote {
    min-height: unset !important;
    height: 250px;
}
  }
</style>

 

Hi @tuanphan,

Just wanted to check to see if you were able to access my site as I've had a few problems with password access over the last week. It seems to be working ok for now?

Thanks so much,

Tatiana

Link to comment
  • 0
On 2/3/2021 at 12:53 AM, tuanphan said:

Hi. You mean slider? Add to Design > Custom CSS


/* resize mobile slide */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

 

Oh my goodness, thank you! This fixed our main page slider but it didn't fix the pages sliders. Is there something else I need to do to fix all those? Examples: bbcnorman.com/children bbcnorman.com/students 

Link to comment
  • 0
On 2/26/2021 at 10:51 PM, hilaryparr said:

Oh my goodness, thank you! This fixed our main page slider but it didn't fix the pages sliders. Is there something else I need to do to fix all those? Examples: bbcnorman.com/children bbcnorman.com/students 

Try new code

/* resize mobile slide */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 2/23/2021 at 10:48 PM, SouthernSunEvents said:

Hi @tuanphan,

Just wanted to check to see if you were able to access my site as I've had a few problems with password access over the last week. It seems to be working ok for now?

Thanks so much,

Tatiana

Hi. Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
12 hours ago, tuanphan said:

Hi. Have you solved it yet?

@tuanphanI think I've figured our the banner image resizing with the code listed below but now when I try to adjust text large sections get greyed out and banner images get cut/rearranged. Any ideas?

 

Here's a before shot:

850790467_ScreenShot2021-03-02at1_54_48PM.png.5d4bc0ea8305fb06c0e5a288bb5eccc5.png

 

And after:

1527540150_ScreenShot2021-03-02at1_54_58PM.png.d91981995b59c8c0a26124abb942cfc0.png1871341362_ScreenShot2021-03-02at1_55_08PM.png.1457d0908e74f787a38d55680b6368ee.png

Site: www.southernsunevents.com

Password: sse2020


@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(1) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e61166c9f9a545c228981fa/1613063589855/82.N%26N-416_id109374907.jpg?format=2500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(1) .Index-page-image img {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(2) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/601d80b87affa87cb4212442/1614193166900/Jenni+Chandler+Photog+1.jpg?format=1500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(2) .Index-page-image img {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .Parallax-item:nth-child(3) .Index-page-image {
    background-image: url('https://static1.squarespace.com/static/5e1752ffdaded31e3f9c43e4/t/5e6116f73d879f7082676743/1609349400689/BLAIRSVILLE_GEORGIA_WEDDING_MEGAN%26KYLEDSC_7045.jpg?format=1500w');
    background-position: 48% bottom;
    background-repeat: no-repeat;
    background-size: 125%;
  }
  .Parallax-item:nth-child(3) .Index-page-image img {
    display: none;
  }
}
 

 

Edited by SouthernSunEvents
Link to comment
  • 0

Hi. Can someone please assist on how to resize banner image for mobile site. A lot of codes have been shared and I don't know which to use. Site is www.NTIyou.com and screenshot attached. Thank you!

IMG_3677.PNG

Link to comment
  • 0
On 3/6/2021 at 1:09 AM, NTIyou said:

Hi. Can someone please assist on how to resize banner image for mobile site. A lot of codes have been shared and I don't know which to use. Site is www.NTIyou.com and screenshot attached. Thank you!

IMG_3677.PNG

Hi. Looks fine here. Did you solve this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Site URL: https://www.garryrichardstud.com/hillstar-1

Hi there, 

@tuanphan I see you have been very helpful to all other comments in this thread and was wondering if you could help me. The banner image on my website looks great on desktop view, but it gets majorly cropped when I view it on mobile (see below). Any tips on why this is happening, and how resolve it? As the majority of our users will be coming to the site on mobile, it is important to have this image displaying correctly?

Thanks 

processed.jpeg

Edited by hello2021
Link to comment
  • 0

Hi @tuanphan I'm having the same issue. Text on my banners is cutoff and won't resize on mobile. Tried using your code above and doesn't seem to be working. Using 7.1. Website is edgecatering.ca. 

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