Protectator Protectator - 2 months ago 8
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,
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>
<html>
<body>
<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>
<section class="box">
My main interests are <strong>hobby 1</strong>, <strong>hobby 2</strong>.
</section>
<section class="box">
Reach me easily on <a href="https://twitter.com/Protectator">Twitter</a> !
<br>
<br> You can also find me on
<ul id="links">
<li>
<div class="name">Twitter</div>
<div class="link"><a href="https://twitter.com/Protectator">@Username</a></div>
</li>
<li>
<div class="name">Facebook</div>
<div class="link"><a href="https://www.facebook.com">Username</a></div>
</li>
<li>
<div class="name">Google+</div>
<div class="link"><a href="https://plus.google.com">+Username</a></div>
</li>
</ul>
</section>
</div>
</body>
</html>





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
<li>
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
font-size
of the first two
<section>
elements goes up when on mobile (I've set it to
20px
in
body
, 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
<li>
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
<a>
elements vertically only using
inline
elements.

Answer

Solution:

Just turn

#container {
  width: 900px;
}

into

#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

Comments