CODEWITHSUNDEEP
htmlcssfontsbaseline
user6036548
user6036548

Reputation:

Different line-height and baseline on mobile and desktops

This is the third time I have faced this problem.

I don't know what is wrong. Here are two pictures of how it looks like:

On desktops:

On mobile devices:

As you can see on mobile devices text is not aligned center vertically.

Again this problem is only visible on mobile devices.

What is the problem? What did I miss? This problem is also visible in inputs.

I am using the following code for the buttons:

.button
  font-family: 'Gotham Pro', sans-serif
  font-size: 14px
  color: $color-text--button
  padding: 10px 15px
  text-transform: uppercase
  background: $color-button--default
  border: 1px solid $color-transparent

Please note, I use padding for setting height of buttons

UPDATE

I have just tested in mobile android Firefox browser, everything works just fine the issue only with Chrome

Upvotes: 8

Views: 5482

Answers (5)

user771417
user771417

Reputation: 31

This works like a charm:

  descent-override: 0%;
  ascent-override: 72%;
  line-gap-override: 3%;

Reference: https://codepen.io/web-dot-dev/pen/poeLebG

Upvotes: 2

Hebe
Hebe

Reputation: 810

I had to work with a fancy font today and I noticed that it has different line-height rendering on chrome mobile device and chrome desktop mobile emulator (devtools). Which is apparently a bug to be reported for either dekstop either mobile chrome. Changing line-heights is the option to fix but cumbersome if you have many elements. After some digging I figured out this properties

ascent-override: 92%; /* play with values */
descent-override: 10%; /* one might not be needed */

Futhermore as I needed font change for mobile chrome only I tried media query and it worked.

@media (max-width: 1000px) {
  @font-face{
    font-family:'FancyFont';
    src:url('fonts/FancyFont.ttf');
    font-weight:400;
    ascent-override: 92%;
  }
}

Upvotes: 1

jjeining
jjeining

Reputation: 61

Not all browsers have a default. Almost always I make a habit of setting styles on the body element

body{
 font-size: 100%;
 line-height: 1.333%;
}

to take care of things like this.

Upvotes: 0

Ojanti
Ojanti

Reputation: 36

Did you specify a media query SPECIFICALLY for mobile? You may need to add

// you can use any other value of screen width mobiles use like 640, 768
@media (max-width:480px){
    line-height: 15px;  // The line height you want to show on mobile
}

Upvotes: 0

chillwalker
chillwalker

Reputation: 98

There is no line-height specified in your code.

Try setting a specific line-height. In addition I suggest, that you center your text via line-height and not via padding. Set a line-height with the same height the button has.

CSS

.button {
    height: 40px;
    line-height: 40px;
}

This works of course only for single line texts. Also have a look at this SO question

Upvotes: 1

Related Questions