Site URL: https://decisivemarketing.co/
I'm having a heck of a time trying to figure out how to properly decrease the banner height on desktop or mobile for my site, which was built on the Impact template.
On Desktop it looks fine. Though, I wouldn't mind making the banner slightly shorter.
On mobile, I inserted a CSS code that someone shared to prevent the banner on mobile from zooming the image in. The below code was inserted into Design > Custom CSS:
@media screen and (max-width:640px) {
.homepage figure img {
width: 100% !important;
left: 0 !important;
height: auto !important;
}
div#banner-wrapper {
height: 100px;
}
}
While the code works great to prevent resizing/zooming on mobile, I'm left with large black sections underneath each image, that I would love to eliminate. (see attached screenshot for example)
Any help would be greatly appreciated.
Thanks!