Jump to content

Mobile image resize causing gray space

Recommended Posts

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

 

Screen Shot 2021-03-02 at 1.54.48 PM.png

Screen Shot 2021-03-02 at 1.55.08 PM.png

Screen Shot 2021-03-02 at 1.54.58 PM.png

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

 

Screen Shot 2021-03-02 at 1.54.48 PM.png

Screen Shot 2021-03-02 at 1.55.08 PM.png

Screen Shot 2021-03-02 at 1.54.58 PM.png

Try make the background cover the block

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

image.png.fab47ede3317b68f993b041225c836f5.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 hours ago, SouthernSunEvents said:

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

Screen Shot 2021-03-09 at 1.06.43 PM.png

Screen Shot 2021-03-09 at 1.06.56 PM.png

If the width is kept then it will crop the height 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, SouthernSunEvents said:

Hey @bangank36

So one of the images before the code 

1571484430_ScreenShot2021-03-10at7_41_49PM.png.8274837d44ab685599192fc2b8be934e.png

 

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

95185409_ScreenShot2021-03-10at7_42_27PM.png.53f59eb1ba0c4b0dce11467bd34eb87f.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

 

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. 

 

34067677_ScreenShot2021-03-10at7_41_49PM.png.237c60e298378b26d838a92cc9dda8e4.png

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

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

Edited by SouthernSunEvents
Link to comment
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!

Link to comment
  • 11 months later...

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

Edited by joannfotografie
Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...
On 3/31/2022 at 2:34 AM, joannfotografie said:

This is what it looks like in mobile view

Schermafbeelding 2022-03-30 om 21.34.14.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.