CODEWITHSUNDEEP
htmlcss
Krzheski
Krzheski

Reputation: 55

How do I make a div hide instead of resize when resizing the browser?

I am making some cards using HTML and CSS, and I want to make them hide in the browser instead of just resizing.

The first image below is the original card. That's what the card looks like on full screen. The second image is what I want to make, the card cuts at a certain point, and the content does not go out of the div like the third image.

enter image description here

HTML:

<div class="card">
            <h1 class="productname">Lorem Ipsum</h1>
            <p class="productdesc">Lorem Ipsum</p>
        </div>

CSS:

    .card {
    background: #000000;
    grid-area: card;
    border-radius: var(--main-radius);
    height: 50vh;
    margin-bottom: 1.5vh;
    word-wrap: break-word;
}

.card .productname {
    font-size: 20px;
    margin-top: -2vh;
    font-weight: lighter;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff;
}

.card .productdesc {
    font-size: 14px;
    color: #ffffff;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: -1vh;
}

Upvotes: 2

Views: 914

Answers (1)

Anna Kozianowska
Anna Kozianowska

Reputation: 166

Set a min-width to the card and overflow hidden to its parent! :) it should do the trick

Upvotes: 3

Related Questions