Protectator Protectator - 1 year ago 107
CSS Question

CSS display:inline-block changes text size on mobile?

I have set up a very simple webpage with that works the way I intend on a desktop browser, but shows strange results on mobile. Here is the code :

body {
font-family: "Raleway", "Tahoma", "Helvetica", "Arial", Sans-serif;
line-height: 1.4;
color: #303030;
font-size: 20px;

a:visited {
color: blue;
text-decoration: none;

a:hover {
color: red;

#container {
width: 900px;
margin: 30px auto 0px auto;

#links .name {
display: inline-block;
font-size: inherit;
width: 90px;

#links .link {
display: inline-block;
font-size: inherit;

.box {
background-color: rgba(255, 255, 255, 1);
padding: 20px 20px;
margin: 20px 0px;
box-shadow: 0 1px 1px #D0D0D0;

<!DOCTYPE html>
<div id="container">
<section class="box">
Hi ! My name is <strong>Name</strong>. You might also know me as <strong>User</strong>. Bla bla bla, this is some text here. But not too much.
<section class="box">
My main interests are <strong>hobby 1</strong>, <strong>hobby 2</strong>.
<section class="box">
Reach me easily on <a href="">Twitter</a> !
<br> You can also find me on
<ul id="links">
<div class="name">Twitter</div>
<div class="link"><a href="">@Username</a></div>
<div class="name">Facebook</div>
<div class="link"><a href="">Username</a></div>
<div class="name">Google+</div>
<div class="link"><a href="">+Username</a></div>

It works perfectly and displays things the way I want when viewed in a dekstop browser :
enter image description here

However, when I view the page from a mobile device, the size of the text of
elements get reduced compared to the rest of the page. Here is how it looks :

enter image description here

I have no idea why this happens. Looking at it through the dev tools, it seems like the
of the first two
elements goes up when on mobile (I've set it to
, but they go way higher in reality :
enter image description here).

The thing I don't understand is then why doesn't this also happen on the
elements ? I could use

<meta name="viewport" content="width=device-width, initial-scale=1">

but then the page would look ugly on phone, which is not what I'm looking for. I just want the text to be the same size on the page.

It seems like the
display: inline-block
is what causes this, but can't find an other way to achieve aligning the
elements vertically only using

Answer Source


Just turn

#container {
  width: 900px;


#container {
  max-width: 900px;

and also apply

<meta name="viewport" content="width=device-width, initial-scale=1" />

in the <head>-section of your html. Check [here], I've set it up on my own server (to stay there) for your reference1. Find the css here.

What happens here:

Since your #container did have a fixed width: 900px your mobile browser automatically scales it down to fit the viewport width. Since browsers do this in an intelligent way, they do increase the font-size of elements to match the intended font-size of elements (which is why you saw much bigger font-size in calculated styles than in the stylesheet).

For some strange reason I cannot explain the browser does not seem to do this for all elements, though.

iPhone 6+ portrait view of website

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download