My current project involves designing a website that displays various quotes, with each quote rotating for a specific amount of time. However, I'm facing an issue where upon loading the page, the first quote triggers the appearance of a scrollbar, making the page look larger than intended. I've attempted to use CSS to hide the scroll bar, but my attempts have been unsuccessful. My goal is to have the width of the quote be responsive by using a percentage instead of a fixed size.
var quotes = [] //contains different quotes
var nextNum = Math.floor(Math.random() * (quotes.length));
var randNum;
var equation;
function genQuote() {
randNum = nextNum;
nextNum = Math.floor(Math.random() * (quotes.length));
while(randNum == nextNum) {
nextNum = Math.floor(Math.random() * (quotes.length));
}
equation = ((quotes[randNum].length / 4.25) * 60)*3;
document.getElementById('quote').innerHTML = quotes[randNum];
setTimeout(genQuote, equation);
}
setTimeout(genQuote, 6000);<p id = "quote"></p>
<!-- attempted different styling methods such as overflow-x: none, hidden -->I am aiming to resolve the issue of the unwanted scrollbar and ensure that the quote's width adjusts responsively without being fixed.