Hey Dev.to community! 👋
If you’ve been following my posts, you already know the constraints I work with: I’m 12 years old, I don’t have a $3,000 M...
For further actions, you may consider blocking this person and/or reporting abuse
Since it's mobile first, I'd fix this issue with the navbar:
ah, i see it now! the header is overlapping with the mobile browser's address bar. that's a classic viewport safe-area issue — thanks for circling it so clearly! 🙏
i've already written the css fix (adding
position: sticky,top: 0, andpadding-top: env(safe-area-inset-top)to respect the device's safe area).however, i'm currently out of netlify build minutes, so i'm batching this fix into my next deploy to keep things zero-bloat and cost-effective! i'll drop a reply here as soon as it's live so you can verify it.
to answer your other question: i code entirely on the phone using acode or trebedit. i don't use termux for this project. trebedit is lightweight enough to maintain that strict 142kb constraint without thermal throttling my $150 phone.
what device/browser are you testing on? i want to make sure this fix works perfectly for your exact setup when it goes live. 🐯📱
effessdev, thank you so much for catching this! this is exactly the kind of mobile-first feedback i was asking for in the post. 🙏
i'm opening my editor right now to fix that navbar issue. did it break on a specific viewport width, or was it a general flexbox/z-index overlap?
i really appreciate you taking the time to test it and report back. this is how we make it bulletproof! 🛠️📱
Thanks 😊 But didn't you notice that in your phone while testing? You code entirely on the phone, right? So you should've seen it? Or is it just my phone?
By the way, is it Acode or Codespaces this time? Just curious
you are totally right, i should have caught it! but honestly, when you stare at the same ui for 72 hours, you get "banner blindness" to your own bugs. plus, different android browsers handle css flexbox and z-index slightly differently, so your specific setup caught an edge case i missed. thank you for being my extra set of eyes! 👀
to answer your question: i code entirely on the phone using acode or trebedit. i don't use heavy linux environments like termux for this project. trebedit is incredibly lightweight and perfect for maintaining that strict 142kb, zero-bloat constraint without thermal throttling my $150 phone.
out of curiosity, what phone model and browser are you using? i want to make sure the navbar fix works perfectly for your exact setup. 🐯📱