I'm facing an issue with a word that has a background color. While using the CSS property background-color: blue, allows me to give the word a background color and display: inline-block helps in sizing it exactly to the word, the problem arises when I increase the font size. The shape of the background color then warps, either turning into a square covering half the word or extending into a line along the width but not the height.
@media (min-width: 768px) {
.about5 {
color: red;
background-color: blue;
display: inline-block;
position: relative;
font-size: 90px;
left: 320px;
font-weight: bolder;
transform: rotate(90deg);
bottom: 100px;
z-index: 3 !important;
}
}<div class="about5">About</div>This results in a blue background color covering only half of the word instead of the whole word.
So, how can I make it cover the entire word perfectly, maybe even adding some padding?
Is it possible to simply use width and height properties, or is there another solution?
Thank you.
You can view the page here, which may appear differently on desktop and mobile devices.