Text moves on devices in responsive design

HTML & CSS
1

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
Image capture on computer on normal screen

image
Image capture on the computer developer tools to a dimension of 300px width

image
Image capture in zoom in mobile from 300px to 400px width

HTML Code:
<a href="" class="registro">Registrarse</a>

CSS:

    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.

2

I think the issue has something to do with <a> being an inline element. AFAIK, they do not do vertical padding like block elements do.

I can’t say what I do is best, I usually display as inline-block when I want to display a link differently. But it might be better to use line-height or box-sizing.

One thing I would not do, is the

font-size: 14px;

I use pixel units as sparingly as possible and mainly for borders only.

2 Likes
3

If you are going to add vertical padding and borders to inline elements then you should instead make them display:inline-block as vertical padding just bleeds out of the current line-height.

You should then set the line-height of the element to make sure that everything is controlled and set the height of the button to match (assuming its non breaking text).

e.g.

Note that depending on browsers and font it may not be possible to always perfectly center the text as browsers add white space to their fonts (half/leading top and bottom) and they have to account for ascenders and descenders which may not all be the same height depending on the glyph etc.

4 Likes
4

Well, i tryed withut font-size and and what PaulOB said first and nothing continue the same… probably is browser compatibility font as you said, because if i remove font family, it’s not perfect but looks better. Thanks for help guys.

1 Like
5

About the vertical-align:baseline; that will keep the button’s text-bottom in level with the outside text on the same line. I.e. in the middle looking at the same font-size.

May I suggest a vertical-align:middle; instead that would keep the button itself at the same level if the button’s font-size changes.

Details, details, I know you are on a phone with a poor connection. :wink:

1 Like
6

If you put up a live demo it will be easier for us to debug fully and then we can see what you are seeing :slight_smile:

You may have styles cascading from somewhere else or you haven’t accounted for line height as mentioned.

The button on my example is centred fine on my phone and desktop.

1 Like
7

I tried right now vertical-align:middle; and neither. I’m using Moto G4 plus with perfect wifi connection :stuck_out_tongue_closed_eyes: and TV is a philips 50 Inch

I can’t show you my website sorry, and i can’t use HelveticaNeueLTStd-Md on codepen…

8

Why not try Verdana or Arial or something else, just so you know it’s not the font your mobile has a problem with?

I can’t detect any difference in e.g. half-lead between your font and common web fonts. It seems to be a clone of Arial, nearly. Then I can’t test on a phone either. :slight_smile:

EDIT)
The “HelveticaNeueLTStd-Md” font I tested had the family name “Helvetica Neue LT STD”

1 Like
9

Is font family with browser, i tried Arial with bold and looks perfect…

1 Like
10

AFAIK, it’s more to do with the OS, than browser. The trick is to have a good “font stack”. Something like

font-family: what I want, what would be OK, generic last resort

I’ve seen stacks up to five, though I think three is usually good enough, but I’m not all that picky.

3 Likes
11

Then you could try the similar Helvetica, common for Mac, as the second choice:

.button{ 
    font-family: Arial, Helvetica, sans-serif;
}
12

Wow i didn’t know about need font stacks XD I had seen it used on the pages but I never knew for what it was I’m so nuuby :blush: Probably I skipped that class. Thanks guys for the help!!

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.