After mixed results with optimizing my portfolio site for mobile, I've been more conscious of simulating mobile devices with Device Mode.
And with my latest journaling app, I stopped to preview it all every step of the way-- Android and iOS to boot!
When I finally deployed it on Netlify, I shared the link to my friend and mentor who gave me props. But the screencap he shared looked weird.
I was crushed to see it looked just as jumbled when I pulled up the site on my own phone. It felt especially demoralized when I put more effort than ever to have responsiveness in mind.
Dev Tools, you lied to me!
How can mirrors be real if our eyes aren't real. - Jaden Smith
Never thought that quote would hit as hard as it did now.
How are you supposed to check the site layout if you can't trust the preview? And to that, I still don't have an answer. Said friend thought it might've been a rem - px issue, but adjusting that math didn't seem to make a difference.
Device Mode preview will remain a mystery, but luckily the actual fix for my site layout wasn't too bad.
position: fixed and
position: absolute were conflicting with other styles. It was much easier to let things fall in line with flexbox and adjust from there.
For those of you who felt Dev Tools betrayal, how long did it take you to regain trust? 🥺 👉👈