Header height

Viewing 10 posts - 11 through 20 (of 21 total)
  • Author
    Posts
  • #2480
    kadoka66
    Participant

    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.

    #2483
    satori
    Keymaster

    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

    #3186
    noisesev
    Participant

    Hi once again Andrii,

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

    Cheers,

    Chris

    #3199
    satori
    Keymaster

    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

    #3206
    noisesev
    Participant

    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

    #3218
    satori
    Keymaster

    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

    #3233
    noisesev
    Participant

    Hi Andrii,

    Could you explain the above code please?

    Thanks,

    Chris

    #3236
    satori
    Keymaster

    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

    #3241
    noisesev
    Participant

    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

    #3244
    satori
    Keymaster

    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

Viewing 10 posts - 11 through 20 (of 21 total)
  • You must be logged in to reply to this topic.