search

thomaspark / flexboxfroggy

A game for learning CSS flexbox 🐸
https://flexboxfroggy.com
MIT License
6.94k stars 684 forks source link

Fix tooltip position on mobile #263

Closed kolumb closed 1 year ago

kolumb commented 1 year ago

On small devices there's incorrect position of .tooltip relative to code.help elements. This PR fixes it by removing unnecessary relative position of #sidebar.

1112222

The position is calculated incorrectly because pond (#view) is placed above sidebar with instructions thanks to this styles: https://github.com/thomaspark/flexboxfroggy/blob/f586e2d5a6e1a94d0831f146fe7b6c4724faabe2/css/style.css#L595-L597

And in here position for .tooltip depends on .offset() method that gives coordinates relative to the whole document (api.jquery.com/offset). https://github.com/thomaspark/flexboxfroggy/blob/f586e2d5a6e1a94d0831f146fe7b6c4724faabe2/js/game.js#L352-L353

I doublechecked in style.css if some other element depends on #sidebar having relative position. There seem to be no such element.

thomaspark commented 1 year ago

Hey @kolumb, thanks for this fix.