I’m creating a web page (CSS for style) and responsive at computer browser works perfectly and at simulator devices too. The problem came when I open the website at real mobile or TV, that some texts are moved up or down some pixels. Anyone can explain me that? Why is that? The texts are perfectly at middle… Have no sense.
Sorry for my english if I did some mistakes typping.
It does not make sense, for example it does not make sense that a button with padding equal in bottom as in top is not centered. I had checked other cases counting the pixels with Photoshop and they are well positioned.
Image capture on computer on normal screen
Image capture on the computer developer tools to a dimension of 300px width
Image capture in zoom in mobile from 300px to 400px width
<a href="" class="registro">Registrarse</a>
border: 2px solid #ba9a67; color: #ba9a67 !important; border-radius: 4px; background: transparent; padding: 3px; font-size: 14px; margin-left: 12px; outline: 0; cursor: pointer; font-family: HelveticaNeueLTStd-Md !important; font-weight: normal; letter-spacing: 0.3px;
This button does not have any element that changes its appearance, neither in media query css nor anything … If you see that sometimes the background is different, it is because there is a video in the background. This is the clearest example that does not make any sense.