cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Go to solution

Header Image Heights in Lyrical Theme

Hi all. I saw someone asked this same question back in 2017 but there was no solution posted. I'm using the Lyrical theme which is a child of Primer I believe? By default, the featured image in the header on all the internal pages is about half the height of the featured image in the header on the homepage. I would LOVE for all pages to have the same height header as the homepage (i.e. the BIGGER image). I've experimented with a bit of CSS and I can successfully force a height on all pages which works, but then it doesn't scale nicely for mobile etc, so I'm sure there has got to be some dynamic CSS I can use? But I'm at a loss. Any help is much appreciated, thanks!

1 ACCEPTED SOLUTION

This should make the rest of the pages work like the homepage.

 

.site-header-wrapper .hero {
  padding: 150px 0; }
  @Media only screen and (max-width: 40em) {
    .site-header-wrapper .hero {
      padding: 0; } }

 

View solution in original post

6 REPLIES 6
Super User II

With responsive design breakpoints are often used to specify different rules depending on the screen size.

 

https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

 

You can post the URL to your site if you need help.

Hi Nate, thanks for the reply. I think you've misunderstood my question though... I understand specifying different rules for different screen sizes. What I'm after is making the internal page headers the same height as the homepage header - not changing the height for different devices.

 

http://new.amanda-rose.net/wordpress

 

there's the site i'm working on. see how the homepage header is about double the height of the internal pages? I want them all to be the same as the homepage. The only solution I've found is to fix the height to a certain px, but then I lose the innate responsiveness... I don't want to fix the heights in all different devices, I'd rather just find some CSS to make the internal pages use the homepage settings? edit one div class rather than adding a whole bunch of extra to specify devices...

 

Hope this helps clarify my question?

Yes, if you wrap the CSS in a breakpoint for larger screens it would not affect what it currently does on smaller screens.

 

@Media only screen and (min-width: 992px) {
    .site-header-wrapper {
        height: 550px;
    }
}

 

Yep, thanks, understood. But then in order to have the internal pages match the taller homepage on mobile devices as well, then I have to specify heights for all different screen widths again, right?

 

I'd rather just tell the theme to use the settings of the homepage on all the pages, which seems to me like it should be a simpler solution? Because the homepage already scales nicely for all devices, and rather than make up my own again from scratch and test them all on various devices, I'm hoping there's a way to just steal the homepage settings that already exist? Am I making sense?

This should make the rest of the pages work like the homepage.

 

.site-header-wrapper .hero {
  padding: 150px 0; }
  @Media only screen and (max-width: 40em) {
    .site-header-wrapper .hero {
      padding: 0; } }

 

View solution in original post

AMAZING, thank you!! I'll work backwards to figure out how you did that... really appreciate it. This seems to work on all devices 🙂