Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 29, 2016 at 12:56 am #590519
    mepho

    Hi, how do I reduce the header size on mobile?

    I tried reducing logo size and header size but i was left with the weird white line overlapping the content, so it didn’t really work. Here’s what i used:

    @media only screen and (max-width: 767px) {
.responsive #top #header {
height: 80px !important;
line-height: 80px !important;
}

@media only screen and (max-width: 767px) {
.responsive #top .logo {
  height: 80px !important;
}
}
    February 29, 2016 at 4:28 pm #590886
    Yigit

    Hey mepho!

    Your header is currently 80px and i cannot see a weird white line. Have you figured it out? :)

    Cheers!
    Yigit

    February 29, 2016 at 7:22 pm #591041
    mepho

    Hey Yigit!

    Sorry, 80px was just an example. Here’s what happens if i set all values to 60px – screenshot

    • This reply was modified 8 years, 8 months ago by mepho.
    February 29, 2016 at 10:46 pm #591171
    mepho

    This helps to remove the border, but I just want to move it up, not get rid of it completely.

    #header_main {
border-bottom: none;
}
    March 1, 2016 at 2:05 pm #591528
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 580px) {
.container.av-logo-container {
    max-height: 59px;
}}

    Best regards,
    Yigit

    March 1, 2016 at 2:14 pm #591533
    mepho

    Thank you, that did it!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Reduce the header on mobile’ is closed to new replies.