0

In a nutshell I'm trying to make these symbols "90%" (for instance) of the size of the container div. Also, the font-size has to be responsive on window.resize.

http://www.jsfiddle.net/b7g1bxqw/

Matt
  • 14,906
  • 27
  • 99
  • 149
gdjc
  • 45
  • 1
  • 10

1 Answers1

0

Maybe the Viewport Percentage Units could help you here.

Try somthing like this:

.chessGrid1, .chessGrid2 {
 width:11.11%;
 float:left;
 text-align:center;
 display:block;
    font-size: 10vw;
}

See also an older post for more information: Font scaling based on width of container

Hope it helps...

Community
  • 1
  • 1
Benjamin Schüller
  • 2,104
  • 1
  • 17
  • 29
  • Tried that, but it applies to the viewport rather than the .chessGrid container so it overlaps the boxes – gdjc Aug 07 '15 at 09:05
  • And I can't use @media queries because the page is totally responsive and as such I can't specify a max-width unless I do it for every pixel – gdjc Aug 07 '15 at 09:07
  • Am getting so near: $(document).ready(function() { var fontSize = parseInt($(".chessGrid").width())+"px"; $(".chessGrid").css('font-size', fontSize); }); But how can I make it do it on window.resize?! – gdjc Aug 07 '15 at 09:43