CODEWITHSUNDEEP
cssfont-size
principal-ideal-domain
principal-ideal-domain

Reputation: 4266

Chrome renders font size too big

I have problems with the following html/css code:

body{
    font-size: 3.8em;
    color: white;
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px;
    margin: 0px;
}

div{
    margin: 0px;
    margin-bottom: 1em;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

#title,#footer{
    background-color: #1e9e40;
    font-size: 0.5em;
    padding: 0.6em;
}

#footer{
position:absolute;
bottom:0px;
margin-bottom: 0px;
}

#main{
    padding: 1.3em;
    background-color: #540054;
    margin-top: 2.5em;
    font-size: 0.65em;
    text-align: justify;
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>css problems</title>

</head>

<body>
<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</div>
<div id="footer">This is the correct font size!</div>
</body>

</html>

When you look at the rendered webpage in the Chrome developer mode with mobile view activated, the #title uses a larger font size than the #footer. I can't explain why. Can you? Here is a screenshot:

Screenshot of the problem

Upvotes: 0

Views: 938

Answers (3)

Dinesh
Dinesh

Reputation: 1027

You should specify different font size for different components or you can change the font size of desired element seperately as shown below

body{
    font-size: 3.8em;
    color: white;
    background-color: black;
    color: white;
    font-family: Verdana, Geneva, sans-serif;
    padding: 0px;
    margin: 0px;
}

div{
    margin: 0px;
    margin-bottom: 1em;
    text-align: center;
    box-sizing: border-box;
    width: 100%;
}

#title,#footer{
    background-color: #1e9e40;
    font-size: 0.5em;
    padding: 0.6em;
}

#title {
  font-size: 0.3em;
}

#footer{
//position:absolute;
bottom:0px;
margin-bottom: 0px;
}

#main{
    padding: 1.3em;
    background-color: #540054;
    margin-top: 2.5em;
    font-size: 0.65em;
    text-align: justify;
}
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>css problems</title>

</head>

<body>
<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</div>
<div id="footer">This is the correct font size!</div>
</body>

</html>

Thank you

Upvotes: 0

karolus
karolus

Reputation: 922

Did some checking on your code.

I also tested for different mobile devices in Chrome developer mode, and the same effect was seen. In desktop display, the browser is using the default user agent stylesheet, so there is no apparent issue.

In mobile viewports though, there's scaling applied, based on the specific device. That will have a bearing on elements with relative sizing, such as ems.

Essentially, what's happening on the #footer div is because it has position:absolute, and so doesn't behave like a block-level element. If you were to set the same fixed height to #header, #footer, and no other changes to the code, the font sizing would also be the same for both.

Similarly, if you position the header with position: absolute, the font sizing will be the same as the footer. The font sizing in the #header and #footer divs is being computed off the parent element, which in this case in the <body> element. Since the <body> element is set with a relative unit (em) for the font-size, it is also affected by the user agent default styling for that device. You'll see this if you set the font-size in the <body> element to a fixed-size value, such as px, where the child elements will also be affected, and be sized the same in relation to this value.

As others have mentioned, if you add this tag to the header: <meta name="viewport" content="width=device-width, initial-scale=1">, you will avoid these sizing issues, since it sets a scale value as a base. I've also added a standards-compliant example below this.

For easier reference, I've also put your supplied code into a runnable snippet:

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
  position: relative;
}

div {
  margin: 0px;
  margin-bottom: 1em;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

#title,
#footer {
  background-color: #1e9e40;
  font-size: 0.5em;
  padding: 0.6em;
}

#main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

#footer {
  position: absolute;
  bottom: 0px;
  margin-bottom: 0px;
}
<div id="title">Title font should be smaller!</div>
<div id="main">Lorem ipsum dolor sit amet, consectetur adipiscing 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.</div>
<div id="footer">This is the correct font size!</div>

To add to this, ideally, you would build the code semantically, that search engines and screen readers could easily parse. This includes the page title wrapped in a <h1> tag, and body text in <p> tags, such as this:

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
}

div {
  margin: 0px;
  margin-bottom: 1em;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

header,
footer {
  background-color: #1e9e40;
  padding: 0.6em;
}

header h1 {
  font-size: 0.5em;
  font-weight: normal;
  margin: 0;
}

main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

footer {
  margin-bottom: 0px;
  font-size: 0.5em;
}
<header>
  <h1>Title font should be smaller!</h1>
</header>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</p>
</main>
<footer>This is the correct font size!</footer>

For reference, the <h1> element is styled to look the footer text, including the same styling. There's a bit more margin around it at times, due to default user-agent styling being applied.

Upvotes: 2

Timothy Alexis Vass
Timothy Alexis Vass

Reputation: 2705

Having reviewed karulos answer again, he is telling you what is happening with your code, but not what is wrong and what is correct.

For what you are trying to achieve and while keeping some of what you have done, this would be proper HTML5 code:

There is no reason to add positioning to the body, header or footer at all. You could also keep the <html> tag like that without defining the xhtml namespace. You should also use <header>, <main>, and <footer> elements instead of <div>.

* {
  box-sizing: border-box;
}

body {
  font-size: 3.8em;
  color: white;
  background-color: black;
  color: white;
  font-family: Verdana, Geneva, sans-serif;
  padding: 0px;
  margin: 0px;
}

header, footer, main {
  margin: 0 0 1em 0;
  text-align: center;
  width: 100%;
}

header, footer {
  background-color: #1e9e40;
  font-size: 0.5em;
  padding: 0.6em;
}

main {
  padding: 1.3em;
  background-color: #540054;
  margin-top: 2.5em;
  font-size: 0.65em;
  text-align: justify;
}

footer {
  margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <header>Title font has the correct font size</header>
  <main>And the rest of the code makes some sense...<br>Lorem ipsum dolor sit amet, consectetur adipiscing 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.</main>
  <footer>This is the correct font size</footer>
</body>

</html>

Upvotes: 2

Related Questions