Help with mobile view font sizing

HTML & CSS
1

I have this headline on a web page that displays successfully. However, I’ve tried to enlarge the text for mobile view without success. Here’s the code:

window.onload = function(){
 setTimeout(function(){
   play();
 }, 6500);
};

setTimeout(fade_out, 29000);
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: 70,
			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 = '';
		}

	}, 600 );

}

I have tried to change the font size in the responsive mobile css like so, without success:

#logo {
width: 110vw;
font-size: 75px;
 margin:9vw 4vw 12vw 20.5vw;
 padding: 1vw 8vw 16vw 20vw;
 align-items: center;
 font-weight: 900;
}

and here’s the html:

<svg xmlns="http://www.w3.org/2000/svg" id="logo" viewBox="0 20 1100 120" fill="white"><path fill="transparent"></svg>
2

I assume you tried something like this.

@media screen and (max-width: 800px) {
  #logo text {
    font-size: 85px !important;
  }
}

The !important would be needed if you were writing 70px into an inline style in the text element html.

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.