Adjusting the line-height and baseline to accommodate various screen sizes on both mobile and desktop

This problem seems to keep coming back for me.

I can't figure out what's causing it. Here are two images showing the issue:

On desktops:

https://i.sstatic.net/AAGbb.png

On mobile devices:

https://i.sstatic.net/Zk4pc.jpg

As you can see, the text is not vertically centered on mobile devices.

Strangely, this problem only appears on mobile devices.

What am I missing here? This alignment issue also affects input fields.

Below is the CSS code I'm using 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

Note: I'm using padding to set the height of the buttons.

UPDATE

I just tested the website on the Firefox browser for Android and everything seems to be working correctly. The issue only occurs in Chrome.

htmlcssfontsbaseline

Answer №1

Your code is missing a line-height specification.

To resolve this issue, consider setting a specific line-height for your text. It is recommended to center your text using line-height instead of padding. Match the line-height value with the height of the button element.

CSS

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

This method will only work effectively for single-line text elements. For more insights, visit this Stack Overflow question.

Answer №2

Ensure you have a designated media query tailored specifically for mobile devices. Consider including:

// Choose a screen width value that suits mobile devices, such as 640 or 768
@media (max-width:480px){
    line-height: 18px;  // Define the desired line height for mobile view
}

Answer №3

It is a common practice to set styles on the body element since not all browsers have a default style.

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

This ensures consistency and takes care of potential issues.

Answer №4

Today, I had the task of working with a stylish font and observed that it displayed differently in line-height on chrome mobile compared to chrome desktop in mobile emulator (devtools). This discrepancy seems to be a bug that should be reported for either the desktop or mobile version of Chrome. Adjusting the line-height can resolve this issue, but it can be tedious if there are many elements involved. After some investigation, I discovered these properties:

ascent-override: 92%; /* experiment with values */
descent-override: 10%; /* may not always be necessary */

In addition, since I only needed the font change to apply to mobile Chrome, I experimented with media queries and successfully achieved the desired outcome.

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

Answer №5

Here is a fantastic solution:

  spacing-override: 0%;
  height-override: 50%;
  margin-override: 5%;

Source: https://example.com/codepen

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

javascripthtmljquerycss

How to target child <div> elements within a parent <div> using jQuery

I am facing an issue with my parent <div> named #amwcontentwrapper. It contains a series of child divs with their own classes and ids. My goal is to utilize jQuery to select these child divs, and if they have the class .amwhidden, I want to leave th ...

javascriptjqueryhtmlcss

The vertical alignment of the wrapper div does not support multiple lines of text

I am having trouble achieving vertical alignment (middle) for a div with 2 lines of text. I can do it with one line, but not two. I want one of the lines to be formatted like a h2 heading, and the other like a regular paragraph. I understand that I could s ...

htmlcss

Tips for preventing a React component from scrolling beyond the top of the page

I am looking to achieve a specific behavior with one of my react components when a user scrolls down a page. I want the component to reach the top of the page and stay there without moving any further up. Here is an Imgur link to the 'intranet' ...

javascriptcssreactjsflexbox

How can I make an HTML textbox in C# MVC flash a background color for one second using TextBoxFor?

I'm currently working with MVC and have the following code in my razor view. @Html.TextBoxFor(x => model.DateTimeStamp, new { @readonly = "readonly", @class=ViewBag.IsLatest ? "latest":""}) I want to briefly change the background color of this te ...

asp.net-mvccssrazor

Implement font-weight variation with the Inter typeface in your Next.js application

I recently configured a nextjs application and am keen on utilizing the Inter variable font; however, I am encountering difficulty adjusting the font weight. import Head from "next/head"; import "@/styles/globals.css"; import type { App ...

next.jsfontsvariable-fonts

Tips for initiating a function at a designated scroll point on a webpage

Currently, I am testing out a code snippet that allows images to flip through in a canvas element. I'm curious if it's possible to delay the image flipping effect until the viewer scrolls down to a specific section of the page where the canvas i ...

javascripthtmljquerycanvashtml5-canvas

Animated scrolling in Angular

I am working on a webpage using Angular, where each module is a component with an animation. However, I am facing an issue where the animation only runs when the page loads, but I want it to happen while the component is visible on the screen. One approa ...

cssangularanimationcss-animations

A guide on using jQuery to cycle through every row of every table on an HTML page

I am trying to figure out the correct syntax for nesting two loops within each other in jQuery. The first loop should iterate over each table in an HTML page that does not have any IDs or classes, while the second loop should go through each table row of t ...

jqueryhtmlcss

Finding a predecessor with Selenide through tag and class identification

Trying to find the ancestor element using Selenide library on a website. The ancestor element is <div class="BorderGrid-cell" ...>. The .closest(".BorderGrid-cell") method works well. However, the .closest("div.BorderGrid-ce ...

cssselenide

Tips for incorporating a visible HTML comment in JSX code?

Currently implementing ReactJS and facing a requirement to insert visible HTML comments (visible in the html source) within JSX. Unsure of the correct approach to achieve this. A third party vendor necessitates this comment for processing purposes on the ...

htmlreactjscommentsjsx

Modify the color of the background for a flex-wrap list

I am facing a situation where I have a list with an unknown number of items, but I need to control the height of its container. To achieve this, I am using flex-flow: wrap column to split the list. The list starts off hidden and is displayed using jQuery&a ...

cssflexbox

Elegant CSS background image fade effect

Having a small JS script that functions properly, but encountering an issue when quickly hovering over buttons causing the smooth transition effect to not work as desired. This abrupt change in image is quite unappealing. Any help would be greatly appreci ...

javascriptcsscss-animationscss-transitions

Steps for generating a div, link, and image that links to another image using Javascript

Hey there, I have a cool picture to share with you! <img src="cards.png" id="img"> <!--CARD PICTURE--> Check out what I want to do with it: <div class="container_img"> <img src="cards.png" id="img"> <!--CARD PICTURE--> ...

javascripthtml

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

Integrating data binding within a .append function using AngularJS

I followed this code example (http://jsfiddle.net/ftfish/KyEr3/) to develop a form. However, I encountered an issue with an input having ng-model set to "value" and needing to display that value within {{ }} in a TD: angular.element(document.getElementByI ...

javascripthtmlangularjs

Sending the parameter with the URL and receiving the response in return

Can the result be retrieved by calling a URL and sending specific parameters with it? For instance, if I pass two numbers along with the URL, can I receive the sum in return? The addition operation is carried out on the page being called upon. ...

javascripthtmlasp.net

The navigation menu collapses upon itself when resizing the browser window

Every time I try to adjust the browser size, the navigation menu seems to collapse within itself, creating a strange effect. I can't figure out what's causing this issue. I've experimented with max-width and sometimes including the "wrapper ...

htmlcss

Does the value of an Angular reactive form control only reflect what the user inputs?

I am working with a reactive form where I need to extract values and assign them to a variable defined in an interface. The form is populated using the Google Places API, which disables user interaction with all controls except for the initial address inpu ...

htmlangulartypescriptangular-materialangular-reactive-forms

Looking to attach the "addEventListener" method to multiple elements that share the same class?

I'm trying to use an event listener in JS to handle the logic in the "onClick" function, but it's only executing once. I've applied the same class to all four buttons, so I'm not sure why it's only working for the first one. HTML: ...

javascripthtmladdeventlistenerdom-eventsevent-listener