Help with changing the font size

[ChrisjChrisj]

I’m using this js and accompanying svg to display an interesting page headline animation. The js code shows: fontSize: 55. In desktop view the size looks good, but looks small in less-than-desktop view. I’d like some guidance with how to make it responsive.

The svg code is attached in an image (couldn’t make it display in this posting).

I’ve tried this in css:

#logo {
 font-size: 150px;
 }

but css doesn’t affect it.

The headline js has this:

window.onload = function(){
 setTimeout(function(){
   play();
 }, 6445);
};
setTimeout(fade_out, 22000);
function fade_out() {
  $("#logo").fadeOut().empty();
}
function play() {
	var blue = '#fff';
	var l = Snap('#logo');
	var p = l.select('path');
  l.clear();
	l.append(p);
	p.attr({
		fill: blue,
		stroke: '#fff',
	});
	setTimeout( function() {
		// modify this one line below, and see the result !
		var logoTitle = 'This Is The Headline';
		var logoRandom = '';
		var logoTitleContainer = l.text(0, '100%', '');
		var possible = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
		logoTitleContainer.attr({
			fontSize: 55,
			fontFamily: 'Arial',
			fontWeight: '700'
		});
		function generateRandomTitle(i, logoRandom) {
			setTimeout( function() {
				logoTitleContainer.attr({ text: logoRandom });
			}, i*70 );
		}
		for( var i=0; i < logoTitle.length+1; i++ ) {
			logoRandom = logoTitle.substr(0, i);
			for( var j=i; j < logoTitle.length; j++ ) {
				logoRandom += possible.charAt(Math.floor(Math.random() * possible.length));
			}
			generateRandomTitle(i, logoRandom);
			logoRandom = '';
		}
	}, 700 );
}

I don’t know a lot of js, so any assistance is appreciated.

[dennisjn]

I believe it is the values in the viewBox attribute which controls scaling.
You also need to give the svg element a width and height then the viewbox values 0 20 1200 110 mean that the content starts at coordinates 0,20 pixels from the top-left corner of the svg element.
The contents will then be scaled 1300/width and 110/height.
I don’t know what the svg width and height attributes default to, maybe it’s container element or the window size.
Hope this puts you on the right track.

[ChrisjChrisj]

Thanks for your reply.
When the responsive view size gets to 1024 the headine drops in size.
Any example of how to prevent that or control that is appreciated.

[dennisjn]

Really need the full generated html and css as the problem seems to be more css relate than js or svg.
But try putting a border around the svg container element to see what it is doing.
When the css is baffling, use borders and background colours to see how the elements are rendering. Or run in the developer mode and inspect the elements.