Bless😇 Posts - Answer Overflow

Bless😇

•Created by Bless😇 on 2/8/2024 in #front-end

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

1 replies

KPCKevin Powell - Community

•Created by Bless😇 on 11/3/2023 in #front-end

Postcss @import not returning content of the files.

My output file returns '@import 'files'' instead of the content of the files. I don't know what I'm doing wrong. I've tried changing files paths, still getting same output. But when I link 'main.css' to my html head, the content in the file reflects on my work. postcss.conf.js - module.export = { plugins: [ require('postcss-import'), ] } package.json - "scripts":{ "postcss:watch": "postcss assets/
main.css --dir public" }, main.css (which is in the same file directory as css (assets) - @import 'css/screen.cc';
@import 'css/ custom.css'; @import 'css/style.css'; Output when I run 'npm run postcss:watch' is public/main.css - @import 'css/screen.cc'; @import 'css/ custom.css'; @import 'css/style.css';

21 replies

Gaming

Programming