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!