Inconsistent gap on my phone, not in laptop.
I am using Vite for my projects, and adding
"dev": "vite --host" to my package.json file so I can see the application on my phone as well.
Whenever I try to use grid or flex for a container and add a gap to its children, it looks good on my laptop but not on my phone.
I set a 1px gap (also tried other gap values) and the best way to describe my problem is as if some child elements have 2px gap, some others 1px gap, and it looks inconsistent. Tried many things and suggestions from ChatGPT but nothing worked.
I tried giving hard-coded values, setting flex: 1, my phone keeps on showing inconsistent gap spaces.
Kind of annoying, might be my phone being a bit old but there should be a fix for this I guess. Any ideas or suggestions? Anyone else had this problem before?4 Replies
can you put your html & css on a codepen pls?
@~MARSMAN~ Thanks for replying.
Yes, but it's nothing fancy. Just a simple flex container with gap for its children.
I guess is not the end of the world but it bothers me a bit when I test it on my phone.
Also, quick note, my phone resolution/zoom, etc is all just normal, so that's not the issue either.
https://codepen.io/nicolasievich/pen/VwOWGmo
it has to do with pixel rounding.
the full width (minus the gapz) devided my the amount of childs might not round to a full pixel. so the gaps won't start on a full pixel either, so sometimes it will round down, sometimes up.
@MarkBoots Thanks for the reply. I will look into it and try to set a different css style depending on the screen to make sure it always has rounded numbers.