title: Resize font size of h1 when browser resolution is below 1260px
body: <p>I'm stuck, I am designing a webpage on resolution 1266px.
  I want it to fit on 1024px because 13% of the people are still using that resolution.
  So I thought I could change the fontsize of my h1 and my nav_items.</p>
  
  <p>So that they will fit, if the resolution drops below 1260 else I want them to stay at the fixed px given to them.</p>
  
  <p>This is what I got:</p>
  
  <pre><code>header {
    width:100%;
    background: #222;
    color: white;
    height: 80px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px; 
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    text-shadow: 2px 2px 0 #000;
  }
  header h1 { /* TAVERNE DE STADSPOORT */
    font-size: 40px;
    float:left;
    color:white;
    margin: 0px 0px 0px 0px; /* top, left, bottom, right*/ 
    padding: 10px 30px 10px 20px; /* top, right, bottom, right*/
  }
  header ul {
    float: right; 
    width: 680px;
    padding: 20px; 0px; 0px; 0px; /* top, left, bottom, right*/
  }
  .nav_items li {
    display:inline;
    font-size:22px;
    margin: 0px 4px 0px 4px; /* top, left, bottom, right (outside) */ 
    padding: 0px 4px 0px 4px; /* top, left, bottom, right*/ 
  }
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div id="logo"&gt;
  &lt;h1 class="nav_items"&gt;&lt;a href="index.html"&gt;Taverne De Stadspoort&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;nav id="top"&gt;
      &lt;ul class="nav_items"&gt;
          &lt;li&gt;&lt;a href="/"&gt;Menukaart&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Suggesties&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Onze wijnen&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Ligging/contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/"&gt;Gastenboek&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p>Maybe I did something wrong, and I could resolve this problem a other way.
  Or should I use jquery instead for archieving this? since I am not familair with that
  an other solution would be great.</p>
  
  <p>i added this: thx all</p>
  
  <pre><code>@media all and (max-width: 1259px) { h1 { font-size: 25px; } }
  @media all and (min-width: 1260px) { h1 { font-size: 40px; } } 
  /* http://www.w3.org/TR/css3-mediaqueries/ */
  </code></pre>