Category description floating to the right

Development

AI-generated summary

pomodoren sought assistance with custom CSS to adjust the layout of category descriptions on their Discourse landing page. While they successfully resized the category logo, they struggled to position the description text to the right of the logo, similar to the OpenStreetMap community example. pomodoren shared their current code, which relied heavily on !important flags and failed to achieve the desired side-by-side alignment. Lilly suggested a solution by applying float: left and padding-right to the category logo image, while also advising against the overuse of !important. pomodoren confirmed that Lilly’s suggestion worked perfectly and noted plans to clean up the CSS by removing unnecessary !important declarations.

1

Hi there,

For the community that we have we are making some updates to the landing page and wanted to achieve something like community-openstreetmap has.

So far we made category logo smaller through following the Making custom CSS changes on your site. But when it comes to category-description - got stuck.


.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);
}

What we want

image
image606×217 18.5 KB

What we have

image
image575×218 11.4 KB

2

try this:

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

also, you are probably overusing !important

4

Worked like a charm! Thank you!

Will remove some of !important :slight_smile: