Home Forums Weaver Xtreme Theme Is there a way to reduce the maximum height of the header and the footer

Topic Resolution: Answered
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #71169
    Answered
    FranckOA
    Participant

    Hello,

    I’m working on a website ( http://wazato.net/ the access password is GRdYn@91* ) with the weaver xtreme theme and I have an issue with the header height : I would like for the header (which is made of widgets) to have a maximal height of 125 pixels but when I tried to add #header {max-height:125px;} in the custom CSS (a method I found while searching on this forum), there is overlaps and everything under the header standard size like the breadcrumbs (maybe around 222 pixel from the top of the header) is covered by the header and unclickable.

    Is there a way to get the header max size to what I want without this overlap problem ?

    And I also have an issue with the height of the footer : I used the global footer area remplacement to use a custom webpage as the footer but I can’t seem to be able to reduce the lower margin (and if I try to had some #footer {max-height] to the custom CSS, a white blank appear under the footer).

    So is there also a way to have more control on the footer height or at least reduce its lower margin ?

    #71170
    scrambler
    Moderator

    I can’t connect with the password provided.

    Also, if you are giving password, make your post private so only you and us can see it.

    That said, I am confused about what you are trying to do.

    If you set a max height but the content does not fit, things are either going to overflow on the area below or be clipped.

    We can choose to have it clipped, and then you need to choose if you want a vertical scrollbar to appear so people can access the clipped content

    This is done using the CSS overflow property

    CSS overflow property (w3schools.com)

     

    #71171
    FranckOA
    Participant

    Strange, the password GRdYn@91* seems to be working (I just tried it on an another computer when asked for access and it worked) ?

    The password is just here to allow visit for concerned parties or for troubleshooting and to avoid bot or “web tourists” visits so it’s not a big issue, but I didn’t found a way to edit my previous post to make it as a private post.

    To describe a little more, the header has actually 2 widgets in it : 1 that is a clickable 725×125 picture and another with 4 small social network icons (so there should be no problem of content fitting when the header height is at 125px).
    Under those two there is always a big empty padding (even if I already lowered all padding entries for the header widget section in weaver Xtrem admin to 0). And when I add #header {max-height:125px;} in the custom CSS, the padding disappear visually but his covering (or “clickable zone”) stay the same, and the menu stay as if the padding was still here, clipping some parts of the page content.

    I was wondering if there was a way (as there is already many option for horizontal padding and sizing in this theme) to solve this issue with vertical padding ?

    #71172
    FranckOA
    Participant

    I have desactivated the password access plugin so you should have no issue to browse the website now.

    #71173
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    Always start by the actual problem “you had empty space”, instead of what you think is the solution (limiting the header height), which in this case is not the solution.

    Remove your max height rule on the header.

    Then the extra space comes from the following

    25px bottom padding on the widget options. Go to the widget settings and set that to zero

    Next there is a 1.75em bottom margin on the column widget, you can remove that for just the widget in the header with the CSS rule below

    #header .wp-block-columns {margin-bottom:0;}

    The is a space between #header and the .wp-block selectors in the rule

    #71174
    FranckOA
    Participant

    It worked perfectly !

    There was a widget bottom padding slider in the appearance visual editor that was on 25 px (and that couldn’t be found anywhere else).

    And adding the CSS you said removed the rest.

    Thank you for solving this issue !

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.