How to remove white space under a banner image on mobile

Site URL: https://www.courageouslyyou.co.uk

Hi there - I've been trawling the forums trying different Custom CSS but with no luck, wondering if someone can help me.

I have a banner image on the top of my homepage which I have resized for mobile and ipad using the following code:

/*Reducing homepage banner image for Mobile And Ipad*/
@media screen and (max-width:640px) {#homepagehi  figure img {
width: 115% !important;
left: 0 !important;
height: auto !important;
}
}

@media screen and (max-width:960px) {#homepagehi figure img {
width: 115% !important;
left: 0 !important;
height: auto !important;
}
}

But I have a large whitespace now underneath. I thought it might be because I was using spacer blocks to increase my banner image height, so I remove those and replaced them with this code:

#collection-5e20b48c12182f60de9e685e #homepagehi { height: 600px }

But that hasn't dealt with the whitespace. Any ideas how to remove the whitespace?

Looks like image attached and whitespace appears to be part of the banner image page (not the next page below). 

For extra info, the text is part of the image rather than a text block overlayed on the banner, as I couldn't get it to resize the image and text and still align.

Thanks in advance!

6 hours ago, RachelCourageouslyYou said:

Site URL: https://www.courageouslyyou.co.uk

Hi there - I've been trawling the forums trying different Custom CSS but with no luck, wondering if someone can help me.

I have a banner image on the top of my homepage which I have resized for mobile and ipad using the following code:

/*Reducing homepage banner image for Mobile And Ipad*/
@media screen and (max-width:640px) {#homepagehi  figure img {
width: 115% !important;
left: 0 !important;
height: auto !important;
}
}

@media screen and (max-width:960px) {#homepagehi figure img {
width: 115% !important;
left: 0 !important;
height: auto !important;
}
}

But I have a large whitespace now underneath. I thought it might be because I was using spacer blocks to increase my banner image height, so I remove those and replaced them with this code:

#collection-5e20b48c12182f60de9e685e #homepagehi { height: 600px }

But that hasn't dealt with the whitespace. Any ideas how to remove the whitespace?

Looks like image attached and whitespace appears to be part of the banner image page (not the next page below). 

For extra info, the text is part of the image rather than a text block overlayed on the banner, as I couldn't get it to resize the image and text and still align.

Thanks in advance!

 

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1632604870371_3370 {
    display: none;
  }
  #homepagehi {
    height: auto !important;
  }
  .Index-page-content {
    padding: 0 !important;
  }
}

Let me know if it works properly on your site

Support me by pressing 👍 if this useful for you

My testing result

Thanks so much!! That has fixed it. However, it's now made the margins smaller for the rest of the homepage pushing the words too close to the edge. Is there a way around that?

Looks like this...

On 10/24/2021 at 2:00 AM, RachelCourageouslyYou said:

Thanks so much!! That has fixed it. However, it's now made the margins smaller for the rest of the homepage pushing the words too close to the edge. Is there a way around that?

Looks like this...

Remove above code & this code

@media screen and (max-width: 640px) {
    #homepagehi figure img {
        width:115% !important;
        left: 0 !important;
        height: auto !important
    }
}

Try adding this to Design > Custom CSS

@media screen and (max-width: 900px) {
    #homepagehi figure img {
        width:100% !important;
        left: 0 !important;
        height: auto !important;
    }
    section#homepagehi {
    height: 200px !important;
}
}

I am having similar issue with large white space at the bottom of my banners on mobile view.  Please advise.

3 minutes ago, THANGDUONG said:

I am having similar issue with large white space at the bottom of my banners on mobile view.  Please advise.

Kindly share the url site with the protected password fpr us to check it together

4 hours ago, bangank36 said:

Kindly share the url site with the protected password fpr us to check it together

https://bellflower-giraffe-2yja.squarespace.com/config/

Empire123

Thanks

 Add to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="6182d199fbbf585cc5804c1b"], [data-section-id="617aa048e95a1a57069340ef"], [data-section-id="6182e791d5e2d234a7566f65"] {
    min-height: unset !important;
    height: 40vh;
}
}