(EN)
Hello everyone,
i tried to use this code but as you can see (screen A), the text below the boxes are craching. I tryed in the SCSS to make the option :
white-space: revert;
and delete
white-space: nowrap;
when i use white-space: revert; the text make column (screen B)
The initial code below
(FR)
Bonjour tout le monde !
J’ai tenté de reprendre le code “Enhanced category”, mais j’ai un bug (image A) avec le texte qui se superpose. Dans le SCSS, j’ai mit
white-space: revert;
et enlevé
white-space: nowrap;
car ce dernier faisait se superposer le texte. en appliquant revert, on peut voir une différence (image B).
Avez-vous eu ce problème avec le code ?
Merci d’avance
Le code initial
Enhanced category-box display component
A
B
TEST :
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.category-description {
display: none;
}
// .title, .featured-topic {
// overflow: hidden;
// text-overflow: ellipsis;
// flex: 0 1 auto;
// white-space: revert;
// }
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
flex: 0 1 auto;
white-space: revert;
}
tbody {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
tr {
display: inline-block;
width: 250px;
min-height: 250px;
margin: 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-left-color: transparent;
margin-block: 70px;
}
.category {
padding: 1.25em 0;
border-width: 0;
display: block;
width: 100%;
height: calc(100% - 2.5em);
position: relative;
background: #f2f2f2;
display: flex;
flex-direction: colum;
flex-wrap: wrap;
align-items: center;
.category-logo {
float: unset;
margin: 0 auto;
}
h3 {
a[href] {
display: flex;
flex-direction: column;
width: 250px;
order: 1;
.category-text-title {
justify-content: center;
}
}
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
border-left: 6px solid;
opacity: 0.35;
border-color: inherit;
}
.subcategories {
.category-name {
margin-top: 0;
}
.badge-notification {
display: none;
}
}
}
}
}