RachelCourageouslyYou
-
Posts
2 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Posts posted by RachelCourageouslyYou
-
-
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!
How to remove white space under a banner image on mobile
in Customize with code
Posted
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...