# Description de catégorie flottant à droite

**URL:** https://meta.discourse.org/t/category-description-floating-to-the-right/393053
**Category:** Development
**Created:** [Janvier 9, 2026, 11:22 UTC](https://meta.discourse.org/t/category-description-floating-to-the-right/393053 "2026-01-09T11:22:04Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![pomodoren](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@pomodoren](https://meta.discourse.org/u/pomodoren)
#### Post date: [Janvier 9, 2026, 11:22 UTC](https://meta.discourse.org/t/category-description-floating-to-the-right/393053/1 "2026-01-09T11:22:04Z")

</div>

Bonjour,

Pour la communauté que nous avons, nous apportons quelques mises à jour à la page de destination et aimerions obtenir quelque chose de similaire à ce que community-openstreetmap a.

Jusqu’à présent, nous avons réduit la taille du logo de catégorie en suivant [Making custom CSS changes on your site](https://meta.discourse.org/t/making-custom-css-changes-on-your-site/168101?tl=en). Mais quand il s’agit de `category-description`, nous sommes bloqués.

```css

.category-logo.aspect-image {
  --max-height: 70px !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 0.5em;
}

.category-logo.aspect-image img {
  display: block;
  width: calc(var(--max-height) * var(--aspect-ratio)) !important;
  max-width: none !important;
  height: auto !important;
  max-height: var(--max-height) !important;
}

.category-description {
margin-top: 0.5em;
overflow: hidden;
color: var(--primary-high);
}

```

  

### Ce que nous voulons

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/5/6/c56ee2698669d75d332d86a43260b183bfe4fa9c.png)

### Ce que nous avons

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/2/8/92888931f0658ab994d70924576eec23d9768740.png)

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [Janvier 9, 2026, 5:33 UTC](https://meta.discourse.org/t/category-description-floating-to-the-right/393053/2 "2026-01-09T17:33:23Z")

</div>

> [@pomodoren](#):
>
> ```plaintext
> .category-logo.aspect-image {
> --max-height: 70px !important;
> width: auto !important;
> max-width: none !important;
> height: auto !important;
> display: block !important;
> margin-bottom: 0.5em;
> }
> 
> .category-logo.aspect-image img {
> display: block;
> width: calc(var(--max-height) * var(--aspect-ratio)) !important;
> max-width: none !important;
> height: auto !important;
> max-height: var(--max-height) !important;
> }
> 
> ```

essayez ceci :

```scss
.category-logo.aspect-image img {
    float: left;
    padding-right: 10px;
}

```

de plus, vous utilisez probablement trop `!important`

---

<div class="post-metadata">

### Author: ![pomodoren](https://avatars.discourse-cdn.com/v4/letter/p/8edcca/32.png) [@pomodoren](https://meta.discourse.org/u/pomodoren)
#### Post date: [Janvier 9, 2026, 7:50 UTC](https://meta.discourse.org/t/category-description-floating-to-the-right/393053/4 "2026-01-09T19:50:37Z")

</div>

Ça a marché comme par magie ! Merci !

Je vais supprimer quelques `!important` 🙂

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [Février 8, 2026, 7:51 UTC](https://meta.discourse.org/t/category-description-floating-to-the-right/393053/5 "2026-02-08T19:51:04Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.