[suisui]

投稿記事一覧の各コンテンツ(記事：リッチメディア)のサイズを調節したい。

【お使いの Snow Monkey のバージョン】バージョン: 10.10.8
【お使いのブラウザ】Googlechrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）

===

トップページに、snow monkey blocksを使って、投稿記事一覧を３つずつ横並びで出力することができました。my snow monkeyからCSSで、投稿記事のコンテンツ幅を１０８０pxに設定しています。

各li要素の大きさを大きくすることが目的で、こちらのul：width:１００% で指定し(コンテンツ幅と一致)、li要素の幅をwidth:３３.３３３%;で検証しました(期待したことはli要素の大きさが1/3ずつの大きさになる)。しかし、各li要素の大きさに変化はありませんでした。

cssにどのような記述が必要になりますでしょうか？

アドバイス、よろしくお願いいたします。

 

//下記がcssの記述(※追加CSSはありません。ページ設定は1カラム、snow monkey blocksから投稿記事一覧を選んだだけの状態。borderはただの目印です。)

.smb-section__inner {
  width: 1080px;
  margin: 0 auto;
  border: 1px red solid;
}

.c-entries .c-entries--rich-media {
  width: 100%;
}

.c-entries__item {
  width: 33.333%;
  border: 1px red solid;
}

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

リッチメディアの段組みには flex を使っているので、max-width と flex-basis の組み合わせで幅を変更できます。

.c-entries--rich-media .c-entries__item {
  max-width: 50%;
  flex-basis: 50%;
}

♥ 1

いいねをした人: 居ません

[suisui]

ご回答、ありがとうございます。

li要素にflex-basis：33.33%、maw-width:33.33%を設定しましたが、ul要素の余白がどうやら邪魔をしているようで、li要素に変化はありませんでした。

そこで、ulを囲んでいるdivを確認したところ、.u-slim-width{max-width:46rem!important}が設定されており、そちらを解除したところ、左右の余白がなくなり、1/3ずつの大きさにできました。

下記のように上書きして解決できました。

.u-slim-width {
max-width: none !important;
}

 

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

最近の投稿ブロックを入れているセクションブロックの設定がスリム幅になっていないでしょうか？そのCSSを追加してしまうとすべてのスリム幅が無効化されてしまうので、スリム幅の設定を外すのがベストだと思います。

♥ 0

いいねをした人: 居ません

[suisui]

スリム幅で設定しておりました。ありがとうございました。

♥ 1

いいねをした人: 居ません

[投稿者]

投稿