title: CSS HTML why do things resize based on screen width when I specify width in px?
body: <p>How come text resizes proportionally when the screen resizes even though I set the font size in px instead of em or % or something like that? I'm pretty sure the pixels on my monitor don't change size...</p>
  
  <p>When I set the px value to look normal on a wide screen it ends up way too small on small screens like cellphones. I want to be able to use something like <code>@media screen and (max-width: 1000px)</code> to specify what the text should be on small screens instead of it shrinking on its own.</p>
  
  <p>I made a very simple page to make sure nothing I did earlier messes with it. I have the text sized to be readable on a regular pc screen:</p>
  
  <p><a href="https://i.stack.imgur.com/lktfv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lktfv.png" alt="enter image description here"></a></p>
  
  <p>But if I resize the screen to less then 1000px width the text shrinks without me specifying the new text size or using em or % values.</p>
  
  <p><a href="https://i.stack.imgur.com/9y2f7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9y2f7.png" alt="enter image description here"></a></p>
  
  <p>The text should fill like half the empty space.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=\"UTF-8\"&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="banner"&gt;
  &lt;div&gt;
      &lt;div class="t_banner"&gt;Banner&lt;/div&gt;
      &lt;div class="t_banner2"&gt;Banner sub text&lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;&lt;span&gt;Phone&lt;/span&gt; &lt;span&gt;999-999-9999&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body{margin: 0;}
  
  .banner{background-color: #f0eedb; height: 185px; box-shadow: 0px 4px 15px #555;}
  
  .t_banner{color: #413e3e; font-size: 50px; font-weight: 600; font-family: Roboto Condensed, serif; border-bottom: solid 3px #222;}
  .t_banner2{color: #413e3e; font-size: 45px; font-weight: 500; font-style: italic; font-family: Roboto Condensed, serif;}
  </code></pre>
  
  <p><strong>EDIT:</strong>
  I experimented by removing the height: 185px; from the .banner styles. Then I added some more text to the banner:</p>
  
  <p><a href="https://i.stack.imgur.com/g6UHI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g6UHI.png" alt="enter image description here"></a></p>
  
  <p>I also added a <p> with no styles between the  and the . The banner text is still resizes, but the the phone and <p> "text" at the bottom doesn't.</p>
  
  <p>Now if I either remove the extra "banner sub text" or bring back "height 185px" then everything, including the completely unrelated p text ends up tiny. Everything seems completely random at this point, and I only have like 2 files with a few lines each</p>