Kevin Powell - Community•11mo ago

Text Causing An Overflow

text still causing an overflow even when I've added 'overflow: hidden; I notice that when I use .mn-pro-ctn{max-width: 100%; flex-wrap: wrap;} for small screens, the text doesn't overflow. the problem is that, I don't want to wrap the cards, I want to display them in an horizontal line then use scroll to view the rest if it overflows the viewport.

echo '<div class="mn-pro-ctn" id="proContainer">';
foreach($products as $product){
echo '<div class="product-crd">';
echo '<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>';
echo '</div>';
 }

echo '</div>'; // mn-pro-ctn closing div

echo '<div class="mn-pro-ctn" id="proContainer">';
foreach($products as $product){
echo '<div class="product-crd">';
echo '<h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>';
echo '</div>';
 }

echo '</div>'; // mn-pro-ctn closing div

css

.mn-pro-ctn{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background: palegoldenrod;
}


.product-crd{
    width: 15%;
    margin-block-end: .5rem;
    margin-inline-end: .5rem;
    background: paleturquoise;
}

 
.product-crd h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


@media (max-width: 900px){
    .mn-pro-ctn{max-width: 100%; }
    
   .product-crd h5{font-size: .8rem;}
}

@media (max-width: 500px){
    .product-crd{min-width: 40%;}

}

.mn-pro-ctn{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    background: palegoldenrod;
}


.product-crd{
    width: 15%;
    margin-block-end: .5rem;
    margin-inline-end: .5rem;
    background: paleturquoise;
}

 
.product-crd h5{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


@media (max-width: 900px){
    .mn-pro-ctn{max-width: 100%; }
    
   .product-crd h5{font-size: .8rem;}
}

@media (max-width: 500px){
    .product-crd{min-width: 40%;}

}

I'm applying .product-crd{min-width: 40%;} to small screens cos the width doesn't grow when I use .product-crd{width: 40%;}.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Text Causing An Overflow