Essayez de supprimer cette ligne :
.subcategories,
Essayez de supprimer cette ligne :
.subcategories,
Pourriez-vous me fournir un lien vers votre page de catégories afin que je puisse jeter un coup d’œil ?
Bien sûr, veuillez consulter cette page.
Essayez de remplacer tout votre CSS par ceci :
.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
width: 150px;
height: auto;
}
.category-boxes .category-box, .category-boxes-with-topics .category-box {
background-color: #F2F2F2;
}
.category-boxes .description {
display: none;
}
.category-boxes .subcategories {
padding-top: 1em;
}
Cela ressemblera à ceci :
Je ne vois pas la classe .category-boxes dans mon code CSS ?
Ah, je vois. Je n’avais pas remarqué que le code de Johani était destiné à être utilisé sur une page de catégorie qui n’utilise pas le style encadré.
Si vous ne souhaitez pas afficher une liste de sujets sous vos catégories encadrées, sélectionnez « encadré avec sous-catégorie » et appliquez mon CSS.
Si vous souhaitez afficher une liste de sujets sous vos catégories encadrées, mon code ne fonctionnera pas, mais je peux essayer de le rendre fonctionnel.
Merci pour votre excellent soutien. Je vais essayer d’ajouter une classe padding-top aux sous-catégories. Je prévois également de réessayer de recréer ce composant de catégorie avec CSS Grid. ![]()
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.category-description {
display: none;
}
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;
}
.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;
}
}
}
}
}
Cela ressemble à ceci :
Ça fonctionne maintenant ! J’ai aussi modifié certaines propriétés CSS Flex. Mais j’ai un problème. Dans le code de @Johani, les catégories sont normalement affichées sur la version mobile. Mais notre code ne fonctionne pas pour le mobile. J’ai vérifié le code de Joe pour les catégories mobiles, quelle est la différence pour l’affichage des catégories sur mobile ? ![]()
Super sujet !
Je me demandais comment faire pour afficher la liste des sous-catégories en colonne plutôt que côte à côte ?
Vue actuelle. Je cherche ce style :
Avec, à côté, le nombre de nouveaux/non lus pour chaque sous-catégorie.
Pour une raison inconnue, lorsque j’utilise exactement le même code, le texte n’est pas centré dans la boîte. En revanche, les images le sont. J’ai essayé de saisir le texte, mais les images bougent avec le texte. Quelqu’un sait ce que je fais de mal ?