search

thomaspark / flexboxfroggy

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

Fix tooltip position on mobile #263

Closed kolumb closed 10 months ago

kolumb commented 10 months 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 10 months ago

Hey @kolumb, thanks for this fix.