+ 18

[CODE] Losing hope to build apps

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

16th Jul 2018, 2:35 PM
Email Not Activated
14 Answers
+ 29
Don't give up. Try to read some books and articles about responsive apps. I know, it's hard to be a web designer.
17th Jul 2018, 2:55 PM
Igor Makarsky
Igor Makarsky - avatar
+ 25
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.
16th Jul 2018, 2:49 PM
Hatsy Rei
Hatsy Rei - avatar
+ 13
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.
17th Jul 2018, 1:58 PM
Ole113 - avatar
+ 10
Thanks for the advice Hatsy Rei ! 👍👍
16th Jul 2018, 11:13 PM
Email Not Activated
+ 10
Keep trying. While sizing, use percent rather than pixel because pixel acts differently on different devices, based on their resolution.
17th Jul 2018, 3:48 PM
+ 9
Keep trying all methods possible and remember: the normal state of a designer is FRUSTRATION.
16th Jul 2018, 6:05 PM
Eduardo Sebastian Ortega
Eduardo Sebastian Ortega - avatar
16th Jul 2018, 11:12 PM
Email Not Activated
+ 6
Here is a link if you want a more in depth look at 'responsive web design' : https://www.w3schools.com/html/html_responsive.asp
18th Jul 2018, 9:50 AM
Ryan Els
Ryan Els - avatar
+ 4
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.
18th Jul 2018, 4:39 AM
Maicon Mauricio
Maicon Mauricio - avatar
+ 4
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
18th Jul 2018, 9:37 AM
Ryan Els
Ryan Els - avatar
+ 2
Don't give up bro. Keep trying till you get exactly what you want
18th Jul 2018, 2:31 PM
Awogor Matthew
Awogor Matthew - avatar
+ 1
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.
17th Jul 2018, 9:49 PM
Joshua (Kua) Cleveland
Joshua (Kua) Cleveland - avatar
+ 1
Don't be frustrated. A baby doesn't know how to walk just after his birth. 😆😆😄
18th Jul 2018, 6:17 AM
Pranab Ranjan Mandal
Pranab Ranjan Mandal - avatar
Use CSS Grid
20th Jul 2018, 12:04 PM
Logomonic Learning
Logomonic Learning - avatar