UI in needle.tools website

šŸŒµ Needle Engine
1

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

2

Hi

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

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

4

right css ahh

by user 263967078346653697

5

why cant it be easy

by user 263967078346653697

6

without web language

by user 263967078346653697