eric eric - 1 year ago 122
CSS Question

Font size decreasing in div set to height 100%

I'm creating a website that is all one page. However, the top of the page has a div that takes up 100% of the screen height to create a full page effect. Everything is working fine, but on mobile, any text that is in the 100% height div is decreasing in font size. I posted this question before, however, I've been doing much more research this time.

Here is the code that I've written:

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
html {
height: 100%;
min-height: 100%;
body {

background: #1A3742;
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin: auto 100px;
height: 100%;
#header {
background: gray;
padding: 28px 0 26px;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;


text-align: center;
height: 100%;

position: relative;
top: 50%;
transform: translateY(-50%);
a[href="#top"] {
vertical-align: middle;
text-decoration: none;
font-weight: bold;
a img{
.content {
overflow: hidden;
.content p{
margin-top: 0px;

<!DOCTYPE html>
<link href=',700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<header id="header">
<a href="#top">Name</a>
<a href="">
<img src="" alt="img" height="24" width="24">

<div id="top">
<div id = "home-content">

<h2>Sub title</h2>
This text does not scale at all.
<div id="section1">
<h1>Section 1</h1>
<div class = "content">

This scales with the screen.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Here is an example using Chrome Device Mode with a Galaxy S5. Note, I scrolled down a bit so you can see the text on the landing section and the text for Section 1.
enter image description here

The font size for Top should be the same as the font size for Section 1.

If I remove the line in the #top:

height: 100%;

The font size does not change for the top portion:

enter image description here

I know that I'm using the default font sizes but I wouldn't expect that to cause issues. Using Chrome Inspector here are the font sizes:

  • HTML - 16px

  • Body - 16px

  • Div id=top - 16px

  • h1 (inside #top) - 32px

  • Div id=section1 - 16px

  • h1 (inside #section1) - 42.6667px

The font size for h1 is 2em. Therefore, the 32px for Top make sense, however, the 42.6667px does not. I do not have this issue on my laptop using any web browser, just mobile. I actually prefer the 42.6667px on mobile as it make it more eligible. However, I want the font sizes to match.

Because the #top div's font size is fine when I removed the div height=100%, I decided I could create the same full page effect using jQuery and margins.

var winHeight = $(window).height();
var topHeight = $('#top').outerHeight(true);

However, I would really prefer not to do it this way.

So, is there a way I can have the #top font size match the #section1 font size?

Answer Source

You're making a responsive website but you haven't configured the viewport. Great link here about it but essentially:

Without a viewport, mobile devices will render the page at a typical desktop screen width, scaled to fit the screen.

So with your 100% height and Chrome's device mode rendering that height as a lot bigger than it is, you got the small text.

Adding the following to the head will make your site display properly on a mobile device:

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

However, you'll need to make some changes as your 100px margin either side on your body squishes your content into a slim column.