この行を削除してみてください:
.subcategories,
「いいね！」 1
カテゴリページへのリンクを教えていただけますか？確認させてください。
もちろんです、そのページを確認してください。
すべての CSS を以下に置き換えてみてください:
.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;
}
このようになります:
「いいね！」 2
私の CSS コードに .category-boxes クラスがありません。
ああ、わかりました。ヨハニのコードは、ボックススタイルを使用しないカテゴリページで使用するつもりだったのですね。
ボックス付きカテゴリの下にトピックのリストを表示したくない場合は、「サブカテゴリ付きボックス」を選択し、私の CSS を適用してください。
ボックス付きカテゴリの下にトピックのリストを表示したい場合は、私のコードは機能しませんが、機能するように修正を試みます。
「いいね！」 2
素晴らしいサポートをありがとうございます。サブカテゴリに padding-top クラスを適用してみます。また、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;
}
}
}
}
}
このように表示されます：
Johani の CSS を修正しましたが、彼自身の修正が何をしているのか分からないため、私の修正がどの程度信頼できるか分かりません。
「いいね！」 2
これで動作します！また、CSS の Flex プロパティをいくつか変更しました。しかし、一つ問題があります。@Johani のコードでは、カテゴリはモバイルデザインで通常通り表示されますが、私たちのコードではモバイルで動作しません。モバイルのカテゴリ表示について Joe のコードを確認したのですが、モバイルでのカテゴリ表示にどのような違いがあるのでしょうか？
素晴らしいトピックですね！
サブカテゴリのリストを横並びではなく、1 列で表示するにはどうすればよいでしょうか？
現在の表示です。以下のスタイルを求めています。
- Bulletins
- Pimax Official
- Site Map
横にサブカテゴリの「新着/未読数」を表示したいです。
何らかの理由で、まったく同じコードを使用しても、ボックス内のテキストが中央揃えになりません。画像は中央揃えになります。テキストを入力しようとすると、画像がテキストに合わせて移動してしまいます。私が間違っていることが何か、ご存知の方がいらっしゃいますか？