luke-else/WMGZON
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Stopped large content from overflowing the product card box

Browse Source
This commit is contained in:
Luke Else 2024-01-25 21:06:53 +00:00
parent b9dc10c99b
commit ce316eb9fd
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/css/products.css
View File

@ -39,23 +39,29 @@
.product { .product {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
flex: 4 0 1rem; flex: 4 0 1rem;
max-width: 40%; max-width: 30%;
padding: .5rem 1rem 2rem 2rem; padding: .5rem .5rem .5rem .5rem;
background: var(--bg-secondary); background: var(--bg-secondary);
border-radius: .5rem .5rem; border-radius: .5rem .5rem;
transition: all 0.2s; transition: all 0.2s;
} }
.product-image {
width: 40%;
height: auto;
box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, 0.025);
}
.product-fs { .product-fs {
height: 80%; height: 80%;
width: 80%; width: 80%;
font-size: 150%; font-size: 150%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
padding: .5rem 1rem 2rem 2rem; padding: .5rem 1rem 2rem 2rem;
background: var(--bg-secondary); background: var(--bg-secondary);
@ -84,3 +90,10 @@
.product-description { .product-description {
font-size: 70%; font-size: 70%;
} }
.hide-overflow {
inline-size: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

2
templates/content.html
View File

@ -11,7 +11,7 @@
</div> </div>
<div class="product-details"> <div class="product-details">
<div class="product-price">£{{product.cost}}</div> <div class="product-price">£{{product.cost}}</div>
<div class="product-description">{{product.description}}</div> <div class="product-description hide-overflow ">{{product.description}}</div>
</div> </div>
</div> </div>
<div class="product-add-to-cart"></div> <div class="product-add-to-cart"></div>