UI in needle.tools website

Hey so I am wondering how the UI is done in official website so that it works both on desktop and mobile.

If I understand correctly, you have 2 types of UI:

  1. Header UI as an overlay canvas. It opens up when you scroll up a bit.

question - how do you make it so depending on whether its mobile or desktop show a different header?

  1. Main Canvas - The text that appears on scrolling through timeline.

question - how do you position the text depending on the size of the screen? I can see that if mobile, then anchor is top. If tablet, anchor is right side, and if desktop, then kinda middle right

Original Post on Discord

by user 263967078346653697


  1. you can use css media queries for that: Responsive Web Design Media Queries
  2. basically the same as 1 :slightly_smiling_face:

Youā€™ll find a ton of articles / blog posts / tutorials when you search for it

right css ahh

by user 263967078346653697

why cant it be easy

by user 263967078346653697

without web language

by user 263967078346653697