My goal is to showcase a variable on my HTML page using CSS for a Graphical display in OBS streaming software. Whenever I apply the class .wrappers to the span id p1Name (and p2Name), the text disappears from the HTML output in OBS. I'm puzzled as to why the text vanishes; it displays perfectly fine without including the class .wrappers.
I've attempted tweaking page settings, class specifications, and relocating the object, but the text continues to disappear.
Edit Adjusting the opacity within wrappers has no impact on the object's visibility.
//Time stuff
let time = document.getElementById("current-time");
setInterval(() => {
let d = new Date();
time.innerHTML = d.toLocaleTimeString(navigator.language, {
hourCycle: 'h23',
hour: '2-digit',
minute: '2-digit'
});
}, 1000);@font-face {
font-family: "Futura";
src: url('Resources/Fonts/Brandon_bld.otf');
}
* {
margin: 0;
padding: 0;
font-family: "Futura";
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
.graphicBox {
position: absolute;
width: 1800px;
height: 105px;
background: rgb(51, 116, 182);
background: linear-gradient(90deg, rgba(51, 116, 182, 0.75) 0%, rgba(110, 83, 180, 0.75) 70%);
border-radius: 15px;
bottom: 40px;
left: 50px;
filter: drop-shadow(-2px 2px 4px black);
}
.statusBox {
position: absolute;
font-family: "Futura";
font-weight: bold;
padding-top: 8px;
font-size: 40px;
width: 130px;
height: 70px;
background: rgb(231, 231, 231);
border-radius: 15px;
text-align: center;
bottom: 125px;
left: 100px;
filter: drop-shadow(-2px 2px 4px black);
}
.timeDisplay {
width: 140px;
height: 30px;
display: flex;
align-items: left;
justify-content: center;
position: absolute;
font-size: 14px;
color: white;
bottom: 58px;
left: 771px;
}
.timeZone {
width: 60px;
height: 20px;
display: flex;
align-items: left;
justify-content: space-between;
position: absolute;
font-size: 15px;
color: white;
bottom: 40px;
left: 812px;
}
.scoreboardP1 {
position: absolute;
left: 150px;
bottom: 60px;
width: 300px;
}
.scoreboardP2 {
position: absolute;
left: 450px;
bottom: 60px;
width: 300px;
}
.wrappers {
position: absolute;
width: 340px;
height: 100px;
line-height: 54px;
top: 356px;
opacity: 0;
color: black;
}
#p1Wrapper {
bottom: 540x;
left: 300px;
color: white;
}
#p2Wrapper {
width: 300px;
bottom: 20px;
left: 100px;
color: white;
}
.scoreDisplay {
position: absolute;
color: white;
width: 60px;
height: 60px;
align: center;
font-family: "Avant";
}
#p1Format {
top: 30px;
left: 1160px;
}
#p2Format {
top: 30px;
left: 1450px;
}
.scoreBox {
position: absolute;
width: 45px;
height: 45px;
background: white;
border-radius: 10px;
align: center;
}
#p1Box {
top: 28px;
left: 1150px;
}
#p2Box {
top: 28px;
left: 1440px;
}<div class="graphicBox">
</div>
<div class="statusBox">
<p>NEXT</p>
</div>
<div class="timeDisplay">
<h1 id="current-time"></h1>
</div>
<div class="timeZone">
<p>EST</p>
</div>
<div id="overlayP1" class="scoreboardP1">
<span id="p1Wrapper" class="wrappers">
<span id="p1Name" class="names"></span>
</span>
</div>
<div class="scoreboardP2">
<span id="p2Wrapper">
<span id="p2Name" class="names"></span>
</span>
</div>