[Resolved] Keeping Header slider contained for large screens

[ch1800]

This is a follow-up from this previous resolved ticket:
https://generatepress.com/forums/topic/keeping-header-images-contained-for-large-screens/#post-1699635

I add here again the 2 sites (#2 and #3) that use merged hero headers and work fine without the use of the CSS snippet.

It seems that there is a problem with the homepage slider at the fist site below as it doesn’t well resize on big screens and overlaps the menu above and content below. I should probably create a dedicated snippet for this but don’t well know which class to use. I tried adding this one .n2-ss-slider-3 but doesn’t seem to work (currently actve).

[David]

Hi there,

thats something you would need to speak the slider plugin author about… the current issue is the Slider is set to Full Width and it uses JS/CSS to force the slider to fill the screen… then each slide is absolutely positioned hence it overlaps the hero container.

Simplest solution would be to disable the Full width option so it stays within the hero.

[ch1800]

Thanks David,

There was a “force full width” setting enabled with the slider that I disabled and it now looks much better on wide screen but only when keeping the header element on full width and not contained, without the CSS snippet. So I’ll leave this one as is for the time being as your snippet works fine with most other sites.

What about the other 2 sites that are using the merge? Is there a particular reason why the contained headers work fine without the snippet? Just curious.

Also, I see that all sites in library I tested are using full width containers and get strange results on wide screens. Is there also any particular reason for keeping such settings?

[David]

The only difference i see is the aspect ratio of those images.
They scale better than super wide images.

Also, I see that all sites in library I tested are using full width containers and get strange results on wide screens. Is there also any particular reason for keeping such settings?

Just a design trend generally has full width heros – and its probably only us web devs that scale sites up to fill massive screens 🙂

[ch1800]

Yep, that’s strange as filling huge screens in width doesn’t really correspond to the definition of responsive – or it’s rather an aberration of this definition. We always check laptop and smartphones and forget to check what’s happening with those super wide screens.

Many thanks anyhow, that was an interesting finding.

[David]

You’re welcome !

[ch1800]

Hi again,

I’m getting back here about the slider as when disabling its option “force full width” it somehow works but the problem is that is gets the height size of the CSS code I’m using that sets the ratio for all other hero images which is not the same as for the slides:

@media(min-width: 1401px) {
  .page-hero {
    height: 467px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }
}

For the slides the height should be set at 700px, so the result is that for resolutions above 1400px the slides overlap the menu above and some portions of the main text below.

I can increase a bit the header’s bottom padding and the page’s top padding but I would prefer avoiding this as they get too much space on smaller screens.

As the above CSS code works fine for the slides with height: 700px;, would it be possible to have this code with height set to 700 only for the homepage, or exclude the homepage from the other code with height set to 467 for instance?

Thanks again.

[Elvin]

Hi there,

You can add body.home.

Example:

@media(min-width: 1401px) {
  .page-hero {
    height: 467px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
  }

  body.home .page-hero {
    height: 700px;
  }
}

[ch1800]

Works great, many thanks Elvin!

A wise man once said:
“Always ask for expert advice before messing with your CSS code”

[Elvin]

No problem. Glad you got it sorted. 🙂

[Author]

Posts