CODEWITHSUNDEEP
cssfonts
ppinzon
ppinzon

Reputation: 137

Font size unaffected when using %?

Beginner at coding. Trying to use % for font size, but when I try, it looks like this no matter what number % I use: http://imgur.com/PLAzOW2

Current Code: Example

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>


<style>

.container
{    
position: relative;
vertical-align:middle;
margin: auto;
}


#random_text
{font-size:40px;
text-align:center;vertical-align:middle;
text-align:-moz-center;
text-align:-webkit-center;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){

$(window).resize(function() {
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
});

var textarray = [
    "\"Example\"",
];
var firstTime = true;

function RndText() 
{
    var rannum = Math.floor(Math.random() * textarray.length);
    if(firstTime) { 
    $('#random_text').fadeIn('fast', function() { 
        $(this).text(textarray[rannum]).fadeOut('fast');
        });
        firstTime = false;
    }
    $('#random_text').fadeOut('fast', function() { 
        $(this).text(textarray[rannum]).fadeIn('fast');
    });
    var windowHeight = $(window).height();
    var containerHeight = $(".container").height();
    $(".container").css("top", (windowHeight / 2 - containerHeight * 0.7) + "px");
}

$(function() {
    // Call the random function when the DOM is ready:
    RndText(); 
});
var inter = setInterval(function() { RndText(); }, 3000);
});//]]> 

</script>

</head>
<body><div class="container"> 
  <div id="random_text"></div>
  </div>
</body>

</html>

Does anyone know why this happens? Does anyone know a solution to fixing the problem?

Thank you

Upvotes: 2

Views: 25

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9654

Check this JS Fiddle, if you're trying to make the font size "responsive", as it grows up for bigger screens and shrinks down for smaller ones, you need to use the view units for width vw, and for height vh

#random_text {
    font-size:4vw; /* font size is 4% of the full width of the view */

You cannot use percentage % to achieve this because the font-size:40% means 40% of the default font-size, not 40% of the view.

Upvotes: 1

Related Questions