Text resizes span/div no matter what

HTML-CSS
1

THE ISSUE

I have two items on a grid thus far, and they work fine… except for their size. it seems the length of the item’s description changes the span’s size even when it doesn’t need to, it shrinks the other span beside it as well which is even uglier taking into account that the descriptions are randomized.

Below is my code except the IDs and classes, etc are changed.

THE HTML

<div id="shop">
    <span id="buyRedBall" class="shopItem">
        <h3>Red Ball</h3>
        <p id="boughtRedBalls" class="boughtRedBalls">Bought: 1</p>
        <span id="redBallDescription1" class="description">I love balls!</span>
<!--the above is a small description, and below is a longer one that increases width even tho there is plenty of space-->
        <span id="redBallDescription2" class="description">do you love balls?!</span>
        <p id="redBallCost" class="redBallCost">Cost: $2</p>
        <button onClick="buy(1)" class="btn">Buy</button>
    </span>
</div>

THE CSS

#buyRedBall {
    margin: auto;
    grid-row: 1;
    grid-column: 1; 
    border: dotted 0.2em;
    border-color: var(--red);
    text-align: center;
    max-width: 50%; /*this and the two below are also attempted solutions, but to no avail.*/
    min-width: 50%;
    overflow-wrap: break-word;
}

.description {
    color: var(--dim);
    overflow-wrap: break-word; 
}

thanks in advance!

2

I have decided to add the css for the shop as well:

#shop {
    display: grid;
    grid-gap: 2em;
    background-color: var(--bg1);
    border: solid;
    border-color: var(--fg1);
    border-radius: 0.5em;

    padding: 1em;
    margin: auto;
    width: 80%;
}
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.