0

I'm trying to create an UI for a browser game.

I have built the UI with layers where I split clickable content and background items (like the city images). I'm always using height with % units (no vh/vw). On desktop it's working fine however when I got to mobile (Chrome) and move the navbar the

  • foreground layers orientate itself based on "height with navbar" (also initial here)
  • background layers orientate itself based on the height of the current state of the navbar from Chrome

I'm trying to achieve that booth behave the same: Either update their height based on the navbar state or keep the height of the "height with navbar". So that the UI is not breaking...

Preview

Here is the current version: https://fix-issue-with-adblock-in-ch.more-or-less-frontend.pages.dev/game/largest-cities-in-the-united-states

I'm using TailwindCSS.

Lars Flieger
  • 2,421
  • 1
  • 12
  • 34
  • You may want to include some of your code, but if you need a fixed height, just explicitly set the height for mobile viewports, e.g. `md:h-[385px]` – segFault Jun 19 '22 at 22:48
  • @segFault It's a lot of code... I'll try to build a minimal reproductive example – Lars Flieger Jun 19 '22 at 23:09

0 Answers0