This is my partners artists website.
She loves the Blossom Travel theme.
https://www.jomcallister.co.uk/
We worked out how to make the banner smaller on the Home page and Blog (News) list page by using a bit of CCS in the theme customise.
The theme provider seems to hav gone really quient on support.
What we dont like is when you go to apecific post the banner takes over to it normal size and most of the screen is taken up with blank space above and below the title.
Anyone know what the CSS tweak would be ?
Image showing what we are trying to aim for, and code already used for twealing the home page.
https://www.jomcallister.co.uk/2021/11/11/ft-steel-jackdaw/
Thanks for looking, hopefully its a simple fix. Tried using the Code Inspector in Firefox but and I'm getting confused 🙁
RT
ignore the last block of code... thats me trying to make it work. baffled mode.
having a look it would appear there is some embedded styling in the Header class "page-header" - try taking that out, see if that meets your needs.
<header class="page-header" style="background-image: url(""); padding-top: 130px;">
In your CSS tool you would need to set that as:
..single .site-content > .page-header{
padding-top: 0 !important;
}
Makes more sense to remove or override the min height value for .page-header
.single .site-content > .page-header {
min-height: auto;
}
Try and avoid using !important declarations
@gridnik and @darthpunk
That works a treat.
Many thanks. Is there nothing STW cant solve! 🙂
PS
Could I change the Auto to a fixed pixel height (making the gap even smaller), or would it all go wrong ?
The height of the header is actually set by this:
.site-content > .page-header .container {
padding-top: 80px;
padding-bottom: 80px;
max-width: 770px;
}
So to reduce the padding just override the padding top and bottom values, e.g:
.site-content > .page-header .container {
padding-top: 40px;
padding-bottom: 40px;
}
Thats works. Brilliant 🙂
Many thanks.
