Image Banner text/header doesn't stay central to image height (Ride Theme)

Store Design
,
1

I am trying to shrink the image banner with custom css, so far I have this written up:

h2 {
font-size: 18px;
}
@media (min-width: 768px) {
.banner {
display: none;
}
}
.banner {
height: 55px;
}

The issue is the text I have attached to the image banner is below the picture and doesn’t stay aligned and central to the height of the banner when I adjust the px in CSS.
My website is https://downunderthunder.com.au
Image for reference (Blue area and text below)

Screenshot_21-10-2024_194819_downunderthunder.com.au.jpeg
Screenshot_21-10-2024_194819_downunderthunder.com.au.jpeg645×655 46.8 KB

What am I missing to align it regardless of the px I enter so it’s always central.

Thanks in advance for any assistance!

2

Please remove this code in Custom CSS of that section

.banner {
    height: 90px;
}
3

I need to keep that. The default sizing is too big by default even on small or adapt to image for what I need. I actually want to make it

.banner { height: 55px;

I just need the text to stay centered when I adjust the height by this method so it sits perfectly central regardless of px. Is this not possible?

4

h2 {
font-size: 18px;
padding-top: unset;
position: relative;
top: -30px;
}
@media (min-width: 768px) {
.banner {
display: none;
}
}
.banner {
height: 55px;
}