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

Store Design
,

Topic summary

Goal: Reduce the image banner’s height while keeping the attached header text vertically centered on the banner in the Ride theme.

Current CSS and behavior:

  • h2 set to font-size: 18px. Later updated with position: relative; top: -30px; and padding-top: unset.
  • .banner height forced to 55px; earlier note of a conflicting rule setting .banner { height: 90px; } in the section’s Custom CSS.
  • @media (min-width: 768px) hides .banner (display: none), affecting larger viewports.

Problem: When changing the banner’s height, the text drops below the image and does not remain vertically centered within the banner.

Suggestion received: Remove the .banner { height: 90px; } rule from the section’s Custom CSS.

OP response and latest update:

  • Wants to keep a reduced banner height (55px), not remove the height override.
  • Added relative positioning with a negative top offset on h2 to nudge text upward, but still seeks a solution that keeps text centered regardless of pixel height.

Status: Unresolved/ongoing. Key ask remains how to ensure consistent vertical centering independent of banner height. A site link and screenshot are provided and central to understanding the layout issue.

Summarized with AI on December 16. AI used: gpt-5.
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;
}