header size in mobile mode

  • Hi there,

    i’m having problems with the size of the three header images in mobile mode – it is way too small – and need a fix.

    In Desktop mode it looks good but if i switch to mobile mode (no matter if tablet or phone) the images in the header get smaller and smaller. The gap between the header and the menu section increases as well. So, in phone mode the header images are displayed very small at the top and then there is a huge white gap before the menu is displayed. There are 3 images aligned next to each other. It would probably be best if the images were aligned below each other in mobile mode.

    The only custom css i added had to do with background color change.

    Do you have any recommendations and/or can help me on this?

    Best regards
    Pete

    The page I need help with: [log in to see the link]

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

  • Hello @petepoint,

    The issue with the header is there, because is set padding of the header 600px. I would think about two solutions.

    1. Try add Additional CSS for mobile view:

    @media (max-width: 576px) {
  .header {
      padding-top: 100px;
  }
}
@media (max-width: 768px) {
  .header {
      padding-top: 200px;
  }
}

    2. Second solution would be to set the image as a logo in the Customize -> Header -> Logo -> Custom Logo and remove the header background image

    Thread Starter petepoint

    (@petepoint)

    Hey Romik84,

    thank you a lot for your quick response. Solution 1 worked perfectly!

    Best regards
    Pete

    thanks for the update ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘header size in mobile mode’ is closed to new replies.