There is a strange issue plaguing my code - I'm enclosing some text in a span tag and it's causing an unexpected line break. It's unclear whether React.js, Next.js, or Bootstrap is the culprit, but I can't seem to get rid of the pesky line break.
If you want to take a look, head over to this page where you'll find the phone number at the top:
I've already attempted using Bootstrap's text-nowrap class, along with adding white-space:nowrap; to every applicable class. My suspicion falls on React.js as the source of the problem, but nothing is certain.
Here's the HTML snippet:
<Col xs={6} md={8} className="text-right header-phone text-nowrap">
<span className="phone-msg text-nowrap">To Purchase Artwork Call:</span> <a href="tel:416.450.5439" className="text-nowrap">416.450.5439</a>
</Col>
And the CSS code:
.phone-msg{
display: block;
white-space:nowrap;
}
.header-phone{
font-size: 20px;
color: #000000;
font-weight: 800;
white-space:nowrap;
}
.header-phone a:link, .header-phone a:active{
color: #c65f0a;
text-decoration: none;
margin-right: 15px;
white-space:nowrap;
}
.header-phone a:hover{
color: #000000;
}