New ghost install, currently experimenting with a basic blog design.
I am trying to reduce the height of the of the “cover” or banner section of casper which in my desktop screen (4K monitor) looks hugely tall. Like so (this is after a slight reduction I could achieve with code injection, see below):
As mentioned with code injection and based on some prior answers in the forum I could reduce the “out-of-the-box” heigh but only a tiny bit (roughly 5%) , using this code:
<style>
@media (min-width: 768px){
.site-header-content {
min-height: 100px !important;
max-height: 300px;
}
}
</style>
I noticed that whatever I set in max-height is just ignored if it’s less than approximately 600px
Any idea of how to override whatever is taking over the max-height in this case?
Here is my site if you want to take a look: https://arielpablo.net