[CODE] Losing hope to build apps

Question

I really try to build a clean, responsive and stable app. It's perfect on my device but when I test it on other devices, the designs becomes messed up, I tried everything like @media rules, flexbox, etc. But still results a messed up design on other devices until I lose hope to resume to build the app and just leave it private. Can anyone give me some advices? I'm open for any suggestions and advices to all web-app developer experts/pros out there. 😔
Sample code:
https://code.sololearn.com/Wd6jkhDpDJr4/?ref=app
https://code.sololearn.com/W4hDra8Zar3S/?ref=app
https://code.sololearn.com/W8xV8ey9g73D/?ref=app

Answer 1

Don't give up. Try to read some books and articles about responsive apps. I know, it's hard to be a web designer.

Answer 2

Speaking of dynamic design, that's a lot of styling and sizing in px that you're using... I can't say much - I don't know what you've (not) tried. When I'm writing web apps, I have at least two devices in my reach, a phone, a laptop, and maybe another phone (super low res), so that I can adjust the designs accordingly, see which styling method adapts the best.

Answer 3

if you want to test out a code on a device that you may not have you can use the chrome developer tools and can choose to test your website with the dimmensions of iphones, andriods, and some laptops.

Answer 4

Thanks for the advice Hatsy Rei ! 👍👍

Answer 5

Keep trying. While sizing, use percent rather than pixel because pixel acts differently on different devices, based on their resolution.

Answer 6

Keep trying all methods possible and remember: the normal state of a designer is FRUSTRATION.

Answer 7

Thanks alot Eduardo Sebastian Ortega Brandon !

Answer 8

Here is a link if you want a more in depth look at 'responsive web design' : https://www.w3schools.com/html/html_responsive.asp

Answer 9

Firefox and Chrome have a feature for testing your website's responsiveness. Just open the devtools and test it:

CTRL + SHIFT + I, on Firefox;
CTRL + SHIFT + J, on Chrome.

Answer 10

I used a responsive web design on your Music Player app with 'vw' viewer width. It seems to do the trick. Here is a link to your player with the modifications to demonstrate. I did not adjust anything at the HTML or JS sections. You will notice I deleted all the 'position' code because it causes havoc with responsiveness. Hope this helps: https://code.sololearn.com/WFwYG8eCwy20/?ref=app

Answer 11

Don't give up bro. Keep trying till you get exactly what you want

Answer 12

the only thing that is not seaming to work on the first code on my phone is the temperature and the weight converter. other than that i am not sure have not really studied css yet.

Answer 13

Don't be frustrated. A baby doesn't know how to walk just after his birth. 😆😆😄

Answer 14

Use CSS Grid