Mobile image resize causing gray space

Site URL: http://www.southernsunevents.com

@tuanphan

@bangank36

I've used the following for the image resize but now when I try to adjust the overlay text large sections get greyed out and banner images get cut/rearranged. Any ideas?

First shot attached is before and second is after trying to adjust text. 

Site: www.southernsunevents.com

Password: sse2020

Code I used for image resize...
@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;
  }
}

10 hours ago, SouthernSunEvents said:

Site URL: http://www.southernsunevents.com

@tuanphan

@bangank36

I've used the following for the image resize but now when I try to adjust the overlay text large sections get greyed out and banner images get cut/rearranged. Any ideas?

First shot attached is before and second is after trying to adjust text. 

Site: www.southernsunevents.com

Password: sse2020

Code I used for image resize...
@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;
  }
}

 

Try make the background cover the block

@media screen and (max-width: 640px) {
  .Parallax-item .Index-page-image {
    background-size: cover !important;
  }
}

12 hours ago, bangank36 said:

@media screen and (max-width: 640px) { .Parallax-item .Index-page-image { background-size: cover !important; } }

@bangank36This works but zooms my images back in. Is there any way to keep the width of my images? 

4 hours ago, SouthernSunEvents said:

@bangank36This works but zooms my images back in. Is there any way to keep the width of my images? 

If the width is kept then it will crop the height 

18 hours ago, bangank36 said:

If the width is kept then it will crop the height 

How can I see what that looks like? Thanks!

5 hours ago, SouthernSunEvents said:

How can I see what that looks like? Thanks!

what look like is it crop the height like your issue?

Hey @bangank36

So one of the images before the code 

And here's after. It really zooms in on this man's face haha

I'd like to keep the width to keep the full scope of the photos. Is that possible to do?

Thanks so much for all of your help on this!

2 hours ago, SouthernSunEvents said:

Hey @bangank36

So one of the images before the code 

 

And here's after. It really zooms in on this man's face haha

I'd like to keep the width to keep the full scope of the photos. Is that possible to do?

Thanks so much for all of your help on this!

Your image's origin ratio has width > height so to cover it full page it should be cropped, we can have work around by crop image manually and upload it to custom css section then replace it on mobile

12 hours ago, bangank36 said:

Your image's origin ratio has width > height so to cover it full page it should be cropped, we can have work around by crop image manually and upload it to custom css section then replace it on mobile

I'm not sure I fully understand. I'd love to keep the image looking like this and figure out how to cut the grey space. 

On 3/10/2021 at 10:44 PM, bangank36 said:

Your image's origin ratio has width > height so to cover it full page it should be cropped, we can have work around by crop image manually and upload it to custom css section then replace it on mobile

@bangank36I'd love to keep the image looking like this and figure out how to cut the grey space. Would this be possible or should I just move forward using the code you provided earlier. Thanks so much for all of your help!

On 3/10/2021 at 10:44 PM, bangank36 said:

Your image's origin ratio has width > height so to cover it full page it should be cropped, we can have work around by crop image manually and upload it to custom css section then replace it on mobile

@bangank36

@tuanphan

@creedon

Just checking on this to see if you all might have a minute. Thanks again!

On 3/19/2021 at 11:58 PM, SouthernSunEvents said:

 

Do you still need help on this?

7 hours ago, tuanphan said:

Do you still need help on this?

I do! Thanks!

On 3/22/2021 at 11:43 PM, SouthernSunEvents said:

I do! Thanks!

I see mobile looks fine here, no gray

1 hour ago, tuanphan said:

I see mobile looks fine here, no gray

I'm using the code you provided earlier in the threat and it works great but I'm looking to keep the width of my images intact. The code zooms in a bit. Is there a way to adjust it?

Thanks so much

On 3/10/2021 at 10:44 PM, bangank36 said:

Your image's origin ratio has width > height so to cover it full page it should be cropped, we can have work around by crop image manually and upload it to custom css section then replace it on mobile

Might you be able to explain this workaround to me? This is my last to do before launching my site and I'm hoping to conquer it this week. Thanks!

Hi! I think I am running into the same problem?

https://gold-cheetah-exh9.squarespace.com/over-mij

pw: Geheim123

When viewed on mobile screen there is a grey space left from resizing the image with css.

This is the code I used:
@media screen and (max-width:640px) {
section[data-section-id="62251c837888112829fbce6e"] img {
  height: 80% !important;
  overflow: hidden !important;
  }
}

@tupakihi @bangank36

On 3/12/2022 at 5:17 AM, joannfotografie said:

Hi! I think I am running into the same problem?

https://gold-cheetah-exh9.squarespace.com/over-mij

pw: Geheim123

When viewed on mobile screen there is a grey space left from resizing the image with css.

This is the code I used:
@media screen and (max-width:640px) {
section[data-section-id="62251c837888112829fbce6e"] img {
  height: 80% !important;
  overflow: hidden !important;
  }
}

 

@tupakihi @bangank36

Can you share some screenshots of your issue?

On 3/13/2022 at 10:03 AM, bangank36 said:

Can you share some screenshots of your issue?

This is what it looks like in mobile view

On 3/31/2022 at 2:34 AM, joannfotografie said:

This is what it looks like in mobile view

You used this code

@media screen and (max-width: 640px) {
    section[data-section-id="62251c837888112829fbce6e"] img {
        height:80% !important;
        overflow: hidden !important
    }
}

It caused problem

You can add this to Design > Custom CSS to resize image on mobile

/* Mobile resize top image */
@media screen and (max-width:767px) {
[data-section-id="62251c837888112829fbce6e"] {
    min-height: Unset !important;
    height: 40vh;
    margin-top: 2vh;
}
[data-section-id="62251c837888112829fbce6e"] .section-background img {
    height: 100% !important;
}}

On 4/1/2022 at 4:18 PM, tuanphan said:

You used this code

@media screen and (max-width: 640px) {
    section[data-section-id="62251c837888112829fbce6e"] img {
        height:80% !important;
        overflow: hidden !important
    }
}

It caused problem

You can add this to Design > Custom CSS to resize image on mobile

/* Mobile resize top image */
@media screen and (max-width:767px) {
[data-section-id="62251c837888112829fbce6e"] {
    min-height: Unset !important;
    height: 40vh;
    margin-top: 2vh;
}
[data-section-id="62251c837888112829fbce6e"] .section-background img {
    height: 100% !important;
}}

 

Thanks! This worked 😄