Banner Image Won't Resize for Mobile View

emr10 · February 9, 2021

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

emr10 · February 9, 2021

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

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

tuanphan · February 9, 2021

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

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

tuanphan · February 9, 2021

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

tuanphan · February 9, 2021

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!

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

capitaltimberco · February 9, 2021

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!

MariaFY · February 10, 2021

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!

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

PW: haiku

SouthernSunEvents · February 11, 2021

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!

Edited February 12, 2021 by SouthernSunEvents

tuanphan · February 14, 2021

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>

tuanphan · February 14, 2021

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!

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

PW: haiku

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

tuanphan · February 14, 2021

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?

SouthernSunEvents · February 15, 2021

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 February 16, 2021 by SouthernSunEvents

studiodelphine · February 16, 2021

On 1/17/2021 at 9:31 PM, tuanphan said:

Which banner Can you take a screenshot?

Screen shots are below

tuanphan · February 18, 2021

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

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

SouthernSunEvents · February 18, 2021

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

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

Edited February 18, 2021 by SouthernSunEvents

SouthernSunEvents · February 23, 2021

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

hilaryparr · February 26, 2021

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

tuanphan · March 2, 2021

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

tuanphan · March 2, 2021

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?

SouthernSunEvents · March 2, 2021

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:

And after:

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 March 2, 2021 by SouthernSunEvents

NTIyou · March 5, 2021

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!

tuanphan · March 7, 2021

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!

Hi. Looks fine here. Did you solve this?

hello2021 · April 7, 2021

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

Edited April 7, 2021 by hello2021

BAA · April 7, 2021

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.

Nipper · April 8, 2021

Having the same issue, codes above don't seem to be aligning with me. @tuanphan do you have any suggestions? Thanks

https://raspberry-coyote-6gss.squarespace.com/config/design

Banner Image Won't Resize for Mobile View

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources