Jump to content

How to remove white space under a banner image on mobile

Recommended Posts

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!

 

Mobile space.png

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

 

Mobile space.png

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

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

My testing result

image.png.c52d3a62c64da5685cdf203e730996ca.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
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...

Screenshot website.png

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

 

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
  • 2 weeks later...
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.

Screen Shot 2021-11-04 at 11.28.14 AM.png

Screen Shot 2021-11-04 at 11.27.51 AM.png

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

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

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

 

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

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.