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>