Home Forums Weaver Xtreme Theme Header

Topic Resolution: Resolved

This topic contains 2 replies, has 2 voices, and was last updated by  merlojh 1 week, 2 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #55942

    merlojh
    Participant

    Is there a way to make the header smaller in mobile view. John

    http://michaelwaynejackson.com

    #55946

    scrambler
    Moderator

    Two possible solutions.

    1- Make the height proportional to the browser width:

    Remove the height in the header setting box and instead add the rule below to the theme Global Custom CSS Rule box, that will make the height proportional to the width of the browser. 30vw is 30% of the Viewport Width. The first value in pixel is there in case an old browser does not support vw units

    #header {min-height:300px;min-height:30vw;}

    2- Keep the height in the option box, and add the rules below to change the value on mobile

    .is-smalltablet #header {min-height:200px;}
    .is-phone #header {min-height:100px;}

     

    #55954

    merlojh
    Participant

    Thanks that works great! John

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.