Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago
Bless😇

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


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%;}

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