Header height

[kadoka66]

It worked. I had no idea that what I was trying to achieve was this easy. Thank you so much for your help. I have purchased a few themes over the last year all with varying support levels but I have never experienced this kind of excellent support before.

[satori]

Glad to hear it worked! Thank you for the kind words – and, should you have additional questions, do not hesitate to contact me.

Sincerely,
Andrii / Satori Studio

[noisesev]

Hi once again Andrii,

Is it possible to manually alter the visible height of the background slider?

Cheers,

Chris

[satori]

Hey Chris,

there’s no setting for that in the Theme Options so far, but you can change it via custom CSS: please try this code –

#background-controls { margin-top: 200px !important; }

you can alter the “200” value to achieve the height you need.

Sincerely,
Andrii / Satori Studio

[noisesev]

Hi Andrii,

This works. Thanks very much! Is 200px the standard setting? Now I’m wondering how much sense it makes so set an absolute value in view of responsiveness?

Best,

Chris

[satori]

Hey Chris,

the standard value is 310px; the height of the slider does not change depending on the screen in the current version of Tokyo, yet if you’d like it to e.g. become smaller on smaller screens, you can add conditional media queries in CSS, for example:

@media only screen and (max-width: 767px) and (min-width: 480px) {
#main #background-controls { margin-top: 100px !important; }
}

Sincerely,
Andrii / Satori Studio

[noisesev]

Hi Andrii,

Could you explain the above code please?

Thanks,

Chris

[satori]

Hey Chris,

the CSS above makes use of the so-called media queries (the first line), which tell the system to apply the styles only given certain width of the screen of the viewing device currently used by the visitor. The second line acts just like in the previous snipped I’ve sent you, telling the background slider area to be 100px in height.

You can find some more information about CSS media queries e.g. here.

Sincerely,
Andrii / Satori Studio

[noisesev]

Hi Andrii,

Thanks for the information. How did you arrive at those dimensions? Should they not be set relative to the screen resolution?

Cheers,

Chris

[satori]

Hey Chris,

if you mean the height of the slider – if we set it to a percentage of screen height, it may lead to undesirable consequences on portrait or landscape screens, thus the only way is to use pixels; CSS does not allow to set height in percentage of screen width. There are not strict rules for the @media breakpoints, in this case they’ve been chosen so as to make the website look good on smaller devices with typical screen sizes.

Sincerely,
Andrii / Satori Studio

[Author]

Posts