カテゴリの説明が右にフローティング

開発
1

こんにちは。

私たちが持っているコミュニティのためにランディングページをいくつか更新しており、community-openstreetmap のようなものを実現したいと考えています。

これまでのところ、Making custom CSS changes on your site に従ってカテゴリロゴを小さくしましたが、category-description の部分で行き詰まっています。


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

私たちが望むもの

image
image606×217 18.5 KB

私たちが持っているもの

image
image575×218 11.4 KB

2

こちらを試してください：

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

また、!importantを使いすぎている可能性があります。

「いいね！」 6
3

(投稿は投稿者によって削除されました)

4

うまくいきました！ありがとうございます！

!important をいくつか削除します :slight_smile:

「いいね！」 2