Resize font-size on screen resolutions

how can i resize font-size on screen resolution becouse i want the text to not be more than 1 line when screen resolution its to small. For example: http://prntscr.com/2qa9ze

<div class="centerbreaking">
<section id="breaking-news">
    <div id="breaking-news-main" class="shadow">
        <div id="breaking-news-title">Lajmi i fundit</div>
        <div id="<?php if ($mobile) { echo "breaking-news-inside-mobile"; } else { echo "breaking-news-inside"; } ?>">
          <ul id="breaking-news-list">

                 <?php $i=0; foreach ($results as $result) : ?>
    <li><label type="text" name="text<?php echo $i;?>"><?php echo htmlspecialchars($result['text'],ENT_NOQUOTES,'UTF-8');?></label></li>
                  <?php $i = $i+1;
                        endforeach;
                   ?>
                   </ul>
        </div>
    </div>

<script>
$(function() {
  $('#breaking-news-inside').vTicker();
});
</script>
</section>
</div>

And my CSS is:

#breaking-news-main { float:left; height:40px; margin:5px 0 0; width:100%; background-color:#96040D; color:#fff; text-transform:uppercase; font-weight:bold; }
#breaking-news-title { background: url("images/bn_title.png") no-repeat scroll 0 0 transparent;color: #000000;float: left;font-size: 12px;height: 40px;line-height: 40px;padding: 0 0 0 10px;text-transform: uppercase;width: 112px;z-index: 999;}
#breaking-news-title p {padding:15px 10px;}
.breaking-news-inside {float: left;height: 40px;line-height: 40px;margin: 0 0 0 5px;padding: 0;width: auto;}
#breaking-news-list {font-size:15px;}

Answers


Set the font-size in em or % (recommended) or if you want in px it's also goint to work... then with Media Queries adjust to your needs.

for example:

body{font-size:16px}
#bannerDiv{font-size:1em}
@media only screen and (max-width: 767px){#bannerDiv{font-size:0.8em}}
@media only screen and (max-width: 479px){#bannerDiv{font-size:0.6em}}

In this case, #bannerDiv will have 1em that's 16px declared in body tag, when you set the @media with 0.6em that's 0.6 parts of 1... so you are reducing the font from 16px to 9,6px

Hope it helps!

Further reading: css3-mediaqueries

Note: this is a CSS3 feature... if you need to support older browsers, you need to use some javascript to do'it.


I would suggest you to set your input width in em instead of px. The size of the input will be proportional with the size of your font. You can also use css property text-overflow:ellipsis (in conjunction with overflow:hidden), to display "..." when your text is too long.


Need Your Help

What's wrong with this multipart form? Android-Java

java android ruby-on-rails multipart

I always get back Content Length Required 411, what am I doing wrong here? am I not sending it right? Im sending to a RoR server. It basically will switch between statements depending on weather th...