I’m trying to add a box at the bottom middle of my screen that’s centered and each line goes as much as it wants unless it reaches the full screen then it goes to a new line, I should have coded it correctly out for some reason the max-width isn’t working, the text always goes to 710px then goes puts a line break, no matter what I put the max-width as it always put a line break right there, and no the text that goes there doesn’t have line breaking in it so it can’t be that.
.newalertbox {
position: fixed;
bottom: 30px;
right: 50%;
background-color: rgba(0, 255, 255, 0.8);
padding: 5px;
border-radius: 5px;
z-index: 1001;
margin: 0 auto;
box-sizing: border-box;
font-weight: bold;
max-width: 75%;
width: auto;
overflow: hidden;
align-items: center;
text-align: center;
transform: translate(50%);
font-size: 12px
}<div class="newalertbox">
<span id="newalerttext"> Special Weather Statement has been issued by NWS Binghamton NY at 1:14pm (Wind= 45 MPH Hail=0.75in) </span>
</div>
New contributor
Scott Reigle is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
4