Home Forums Weaver Xtreme Theme Header

Topic Resolution: Resolved

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

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


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




    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;}




    Thanks that works great! John

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

You must be logged in to reply to this topic.