Struggeling with header distances

Hi guys,
I decided to have my header slideshow pictures for my website always 100% width with fixed dimensions (1920x900). Now I’m confronted with various problems:

  • there’s a gap between header picture and background
  • the Sydney project files start to far down the page

I tried to overcome the problem with -30% margin reduction like this:
.page .sydney-hero-area {
margin-bottom: -20%;
}
But that did not solve the problem. Depending on aspect ratio and resolution of the browser it stioll does not work.

As well after a fresh load of the page the project pictures overlap - it’s OK, when you click on “Show all”

Any help would be appreciated.
Cheers, Timo

Hello Timo,

I don’t think that there is an easy way to achieve that with default Sydney slider, so please try to experiment with slider plugins to find one that meets your needs. Here is a relevant Sydney Pro documentation page:
https://docs.athemes.com/article/118-header-settings-in-sydney-pro

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman, thanks for your answer.
Can you tell me what is the main part of the problem? Is it that my pictures are set to always 100% or the dimensions of my pics?

And what causes the problem with the project pictures that after reload only display without overlap after you click on “Show all”?

Cheers, Timo

Hello Timo,

  1. Default Sydney slider is designed to occupy whole screen by cropping images.

  2. Please create a new topic for your projects issue to make it easier to help you.

Kind Regards, Roman.