Height of Header on Mobile device

ThemeBurn SupportForumsOpenCart ThemesKiddos OpenCart ThemeHeight of Header on Mobile device

This topic has been marked as resolved.

I have fixed header on mobile device using script below (which I have found on the forum.
/**** FIX header in mobile ****/
@media (max-width: 768px) {
#wrapper {
padding-top: 18%;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0px;
background-color: #d8f0ed;
/*height: 11%;*/
}
}

In portrait view (vertical) it looks very nice (picture 1, iphone 6)
But when I turn device in horizontal (landscape) position the height of header is too big (picture 2, iphone 6)
Please help to optimize the height of header.

  • This reply was modified 2632 days ago by  Slivkiss.
February 8, 2017 at 10:20 am #56193

Hi,

You need to decrease the height of your site logo to be 50-60px maximum:

@media (max-width: 768px) {
  #site_logo img {
    max-height: 60px;
  }
}

BR,
ThemeBurn team

February 8, 2017 at 6:36 pm #56219

Thanks. It helped a lot.
But how can I also decrease top and bottom margins?

February 8, 2017 at 9:09 pm #56223

Guys, any update?
How can I also decrease top and bottom margins?

February 10, 2017 at 1:04 pm #56260

Hi,

Please check the code in your first post in this topic. You need to replace the percent padding top of the wrapper with a fixed value, e.g. 80px:

padding-top: 80px;

BR,
ThemeBurn team

February 14, 2017 at 1:37 am #56433

HI, I did like you wrote. The effect is the same that I had with padding-top: 18%;
But on iphone 5 I see the following picture (5s): the slicer goes under the header. This is one issue.
But actually my previous question was about the distance between top of header and buttons, and bottom of header and buttons. Please see the picture pic2.

Thank you in advance

February 14, 2017 at 12:08 pm #56451
You will need to register in order to post topics and read replies in the ThemeBurn.com support forums!
February 20, 2017 at 10:08 am #56618

Unfortunately your code did not helped.

I have added the following code below code and received expected result.

#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0px;
padding-top: 16px; /*decrease space above logo and buttons*/
}
.tbLogoCol {
margin-bottom: -23px;/*decrease space under logo and buttons*/
}

February 20, 2017 at 8:09 pm #56675

Hi,

Please check the code from our previous post again. We’ve put !important to the CSS property to overwrite any other rules. It should work now.

https://nimbus.everhelper.me/client/notes/share/783523/29zwrvgocv69bwpf1lwp

BR,
ThemeBurn team

February 24, 2017 at 10:27 am #56826

thank you very much

March 7, 2017 at 12:36 am #57201

Glad we’ve helped :)

BR,
ThemeBurn team

March 10, 2017 at 5:21 pm #57303
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.