Grey space beneath image on mobile?

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

Hi! I had to add the below code to custom CSS to get the images (brought in from Canva) to show up properly on mobile, and while it works great, there's now a giant gray space beneath the images that I can't figure out how to get rid of. Thanks for your help! 

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;

}
}

15 hours ago, CoffeeandBiscuits said:

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

Hi! I had to add the below code to custom CSS to get the images (brought in from Canva) to show up properly on mobile, and while it works great, there's now a giant gray space beneath the images that I can't figure out how to get rid of. Thanks for your help! 

 

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;

}
}

Hi. Which images? Can you take a screenshot? We can help easier

Yes! So it's the top three—I'll attach here. Thanks!

Hi,

First remove this code

@media screen and (max-width: 640px) {
    .homepage .section-background img {
        width:100% !important;
        height: auto !important
    }
}

Next, add new code

/* mobile-homepage-resize images */
@media screen and (max-width:767px) {
/* top image */
[data-section-id="6082def32e775460cbae4e49"] {
    min-height: unset !important;
    height: 35vh;
}
/* second image */
[data-section-id="60c9198bd2ac4f5edc1dab4e"] {
    min-height: unset !important;
}
/* section3-about */
[data-section-id="60c8bd76facd1d0dda05f765"] {
    min-height: unset !important;
    height: 30vh;
}
}

That worked perfectly, thank you so much!

On 6/17/2021 at 8:34 PM, CoffeeandBiscuits said:

That worked perfectly, thank you so much!

Need help on these?

Site URL – https://www.blossomcreativeagency.com/

1. (Tablet-Homepage) resize images?

2. (Tablet-Header) Increase logo size?

3. (Case Studies) You havent change SEO Title so the browser tab name still shows “services 2”

4. (Contact) Similar, shows “Contact 1”

Also seeing some grey space under the second and third banner images in mobile view on my homepage. I've messed with spacers and the coding a bit but nothing seems to be doing the trick.

www.southernsunevents.com

PW: sse2020

My image resize css:

/* RESIZING BANNERS - IMAGE 1*/
@media screen and (max-width:640px) {
section#about-intro figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#about-intro {
    min-height: unset !important;
    height: 80vh !important;
}
}

/* RESIZING BANNERS - IMAGE 2*/
@media screen and (max-width:640px) {
section#explore-our-work figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#explore-our-work {
    min-height: unset !important;
    height: 80vh !important;
}
}

/* RESIZING BANNERS - IMAGE 3*/
@media screen and (max-width:640px) {
section#quote figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#quote {
    min-height: unset !important;
    height: 80vh !important;
}
}

10 hours ago, SouthernSunEvents said:

Also seeing some grey space under the second and third banner images in mobile view on my homepage. I've messed with spacers and the coding a bit but nothing seems to be doing the trick.

www.southernsunevents.com

PW: sse2020

 

My image resize css:

/* RESIZING BANNERS - IMAGE 1*/
@media screen and (max-width:640px) {
section#about-intro figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#about-intro {
    min-height: unset !important;
    height: 80vh !important;
}
}

/* RESIZING BANNERS - IMAGE 2*/
@media screen and (max-width:640px) {
section#explore-our-work figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#explore-our-work {
    min-height: unset !important;
    height: 80vh !important;
}
}

/* RESIZING BANNERS - IMAGE 3*/
@media screen and (max-width:640px) {
section#quote figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#quote {
    min-height: unset !important;
    height: 80vh !important;
}
}

 

No grey here. Did you solve?

On 7/27/2021 at 6:36 AM, tuanphan said:

No grey here. Did you solve?

Not solved. Happening on all banner images on  tablet too.

On 7/28/2021 at 9:19 PM, SouthernSunEvents said:

Not solved. Happening on all banner images on  tablet too.

@creedon might you happen to have any ideas on this one? Thanks!

I'm not seeing the issue you're are seeing.

I am seeing a perhaps different issue. A white band at the right side of the website. Usually indicates an overflow issue. It appears to happen at only some screen widths.

The gray you see in this pic is not part of the screen image. It is the background behind my screen size test resolution.

These two issues could have the same cause manifesting in different ways.

I don't have a solution at this time.

On 8/2/2021 at 7:09 PM, creedon said:

I'm not seeing the issue your are seeing.

 

I am seeing a perhaps different issue. A white band at the right side of the website. Usually indicates an overflow issue. It appears to happen at only some screen widths.

The gray you see in this pic is not part of the screen image. It is the background behind my screen size test resolution.

These two issues could have the same cause manifesting in different ways.

I don't have a solution at this time.

Thanks for this info. @tuanphanmight you happen to have an insight on this? I appreciate everyones help!

@SouthernSunEvents

Ah ha! I see the grey bands. I loaded up your site on my ancient iPhone 5/iOS v10.x and saw the grey.

Still don't have a solution but at least it's confirmation of an issue.

What I noticed is that the grey seems to be only temporary. It happened when I scrolled quickly down the page. It appeared it was taking a few seconds for the rendering to catch up and then the grey would go away.

7 hours ago, creedon said:

@SouthernSunEvents

Ah ha! I see the grey bands. I loaded up your site on my ancient iPhone 5/iOS v10.x and saw the grey.

Still don't have a solution but at least it's confirmation of an issue.

What I noticed is that the grey seems to be only temporary. It happened when I scrolled quickly down the page. It appeared it was taking a few seconds for the rendering to catch up and then the grey would go away.

I should've mentioned I'm pretty much 90 years old and use an iphone 5 haha. Will keep investigating!