Bless😇
Bless😇
KPCKevin Powell - Community
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