Header mobile responsiveness

Support
#1

Hello!

I have been building a header in the header builder.
The mobile views work correctly at different breakpoints until I rotate a device to landscape, then the menu breaks and overlaps over other content. Am I missing something to get this working correctly?

[Album] Imgur

#2

Hey @hatfieldchurch,

Thanks for writing in. Please give us the following details:

  1. The URL of your site or page in question
  2. What is the resolution of your device
  3. What OS and browser you’re using and their version

Thanks.

#3

Hey @christian_y

  1. www.hatfield.co.za/new-home-page
  2. Samsung galaxy S8+ 2960 x 1440
  3. Android - Same issue on Firefox and Chrome

Thanks so much for getting back to me

#4

Hi There,

Yes, I can see the issue even on chrome inspector: https://screencast-o-matic.com/watch/cFeUj1DpIQ. This is a matter of setup and using correct element. It is always good to take note of the element you were using in relation to the device/screen size. When using that specific element for menu, make sure to use limited menu link only. Regarding the overlap, it is because of vh height. See this too:
The content is squeeze on the short height when device is on landscape mode.

You might need to implement media queries for MOBILE LANDSCAPE view. See this guide:

Hope this helps.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.