CODEWITHSUNDEEP
htmlcss
SaidbakR
SaidbakR

Reputation: 13544

The font-size could not be decreased using CSS

I'm using bootstrap and I'm trying to make a hint paragraph's p.tiny text very tiny in size. Using developer's tools show me that the font could not be smaller if it is less than 15 px. The following is what I have tried:

window.history.back();
nav,
.container {
  display: none;
}

h1 {
  color: red;
}

div.panel * {
  text-align: center;
  font-family: AraJozoor-Regular, Arial, Ubuntu, serif;
  text-shadow: 1px 0px 2px #800000;
}

div.panel hr {
  height: 20px;
  background: red;
}

div.panel img {
  display: block;
  margin: 0 auto;
}

p.tiny {
  font-size: 8px !important;
  text-shadow: none;
  font-style: italic;
  font-weight: 400;
  font-family: sans-serif;
}
<div class="panel">
  <img src="/imgs/wrong.png" />
  <h1>Error: 1</h1>
  <h3>This Application Works Only With Javascript Enabled Browsers.</h3>
  <h3>Please contact the system Administrator.</h3>
  <div>Your browser: Chrome, Version: 61.0<sup>(*)</sup></div>

  <hr />
</div>
<p class="tiny">(*): It`s estimated information and it may not be accurate enough.</p>

I also tried to set the font size of p.tiny with proportional units, i.e % and em but that would not decrease the font size either.

Upvotes: 0

Views: 1328

Answers (2)

James Harrington
James Harrington

Reputation: 3216

the code you provided in the question has the style and script tag between the </head> and <body> This is not legal. Try moving the tags?

here is a working version plnkr.co/edit/FFB1K3j1dmUaWdBir5M9?p=preview

Upvotes: 0

Johannes
Johannes

Reputation: 67768

Some browsers have a "minimum font-size" setting (for example Firefox: 10px) and they won't display text smaller than that to keep it always readable. This is purely a browser setting and overrides any CSS rules. I f you change this setting to 8px, you'll see the desired result, but other users won't, unless they change that setting in their browser.

Upvotes: 2

Related Questions