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

Grey space beneath image on mobile?


Question

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;

}
}

Link to comment

13 answers to this question

Recommended Posts

  • 0
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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

blossomcreativeagency.com-01-min.png

2. (Tablet-Header) Increase logo size?

blossomcreativeagency.com-02-min.png

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

 

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

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

 

IMG_6075.thumb.PNG.98158ae4980ef5fb7ad661c15cd5a8af.PNG

Link to comment
  • 0
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;
}
}

 

IMG_6075.thumb.PNG.98158ae4980ef5fb7ad661c15cd5a8af.PNG

No grey here. Did you solve?

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

822155200_ScreenShot2021-08-02at4_01_35PM.thumb.png.a9fd0a1d5edc7c088ed99af1458ceff9.png

 

589452639_ScreenShot2021-08-02at4_01_18PM.thumb.png.9861904cd7c5fe3b0d814ae9a6084430.png

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.

1801785802_ScreenShot2021-08-02at4_05_59PM.png.1b259bab70a10fd64e0737c1389c6b5d.png

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
On 8/2/2021 at 7:09 PM, creedon said:

I'm not seeing the issue your are seeing.

822155200_ScreenShot2021-08-02at4_01_35PM.thumb.png.a9fd0a1d5edc7c088ed99af1458ceff9.png

 

589452639_ScreenShot2021-08-02at4_01_18PM.thumb.png.9861904cd7c5fe3b0d814ae9a6084430.png

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.

1801785802_ScreenShot2021-08-02at4_05_59PM.png.1b259bab70a10fd64e0737c1389c6b5d.png

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!

Link to comment
  • 0

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

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