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:

On mobile devices:

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

Incapable of grasping the intricacies of condensed

I recently came across a code snippet on geekcode(dot)tk and I have a question about it. Specifically, I would like to understand why the section within the table data tag is written in that particular way (at the bottom of the provided code). Thank you fo ...

phphtml

HTML / CSS / JavaScript Integrated Development Environment with Real-time Preview Window

As I've been exploring different options, I've noticed a small but impactful nuance. When working with jQuery or other UI tools, I really enjoy being able to see my changes instantly. While Adobe Dreamweaver's live view port offers this func ...

javascripthtmlcsside

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

htmlcssflexbox

What is the method for inserting a clickable link into a data-image line of code using CSS3?

Recently, I delved into the world of CSS and am still getting the hang of it, Below is a snippet of code that I have been working on, <div id='ninja-slider'> <ul> <li> <div data-image="images/md/1.j ...

javascripthtmlcssslider

Is there a way to smoothly slide an element in the same way another element can be dragged out

I am currently using AngularJS. My goal is to achieve the following: When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that ...

htmlcssangularjsangular-material

Ways to disable HTML loading prior to CSS loading

After downloading a site template, I observed that the HTML is loaded first before the CSS. Is there a way to disable this? I am looking to create a preloader for the website. ...

htmlcss

Failure to display masonry arrangement

I am working on creating a stunning masonry layout for my webpage using some beautiful images. Take a look at the code snippet below: CSS <style> .masonryImage{float:left;} </style> JavaScript <script src="ht ...

javascriptjqueryhtmlcssjquery-masonry

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

My task is to replicate the construction shown in this image: I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code: .ps-timeline-sec { position: rela ...

javascripthtmlcss

"Utilizing Bootstrap's Table Features within the Moodle Platform

Hey there! I'm currently in the process of updating a client's Moodle website. Our goal is to create responsive tables on the homepage, but I've encountered some challenges. Due to conflicts with other Moodle libraries, I wasn't able to ...

cssmoodlebootstrap-table

Tips for creating a responsive container for mobile and smaller devices using Bootstrap 3

Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you! I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible to create an HTML link that prevents users from navigating back to the previous page or displaying the previous link in their browsing history?

I've been tasked with creating a button on a client's website that links to another page, like Google, for the purpose of assisting someone seeking help in case of an emergency. The challenge is finding a way to prevent the user from easily retur ...

javascriptjqueryhtmlcss

Generating div elements of varying colors using a combination of Jinja templating and JavaScript loop

Utilizing jinja and javascript in my template, I am creating multiple rows of 100 boxes where the color of each box depends on the data associated with that row. For instance, if a row in my dataset looks like this: year men women 1988 60 40 The co ...

javascripthtmljinja2data-visualizationtemplating

Elevate Your Flipclock.js

I am currently working on a website that utilizes flipclock.js, but I am facing some challenges in enlarging it to occupy more space on the page. Is there anyone who knows how to upscale or increase its size? ...

cssflipclock

Combining various components within an inactive element tag using Vue

I am working on creating expandable rows for a table element using this HTML code snippet. The current approach involves alternating between parent rows and multiple rows within tbody elements. <tbody class="js-table-sections-header">Parent row</ ...

javascriptjqueryhtmlcssvue.js

create a word with only **one** bold letter in the word ionic-angularjs

Can someone please guide me on how to style only a specific letter within a word using angularJS? Specifically, I want to make the first letter bold while keeping the rest of the word in normal font. For instance, if I have an array of words like: var Wor ...

javascriptcssangularjshtml

What is the best way to extract all image URLs from a website using JavaScript?

There are various methods to retrieve image src urls using JavaScript, such as utilizing document.images or by targeting all img elements and fetching their src attributes. However, I am currently unable to extract the image urls specified within CSS styl ...

javascripthtmljquerycssdom

Python allows for the color coding of numbers using a method that is comparable to the conditional

Looking for a Python module or workaround to color code numbers from 0 to 100, transitioning from red to green. I want to visually represent a score by changing the font color based on the number without starting from scratch. Considering creating a dictio ...

pythonhtmlcssnumbersconditional-formatting

Display block disappearance persists even after being set to none

Presented below is my menu design: <div class="span2 main-menu-span"> <div class="well nav-collapse sidebar-nav"> <ul class="nav nav-tabs nav-stacked main-menu"> <li class="nav-header hidden-tablet"><span ...

htmlcss