Databases
StackOverflow2013
Postsdbo
POResize font size of h1 when browser resolution is below 1260px
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResize font size of h1 when browser resolution is below 1260px
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload