-
投稿者投稿
-
2020年8月4日 11:20 PM #54958
投稿記事一覧の各コンテンツ(記事:リッチメディア)のサイズを調節したい。
【お使いの Snow Monkey のバージョン】バージョン: 10.10.8
【お使いのブラウザ】Googlechrome
【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)===
トップページに、snow monkey blocksを使って、投稿記事一覧を3つずつ横並びで出力することができました。my snow monkeyからCSSで、投稿記事のコンテンツ幅を1080pxに設定しています。
各li要素の大きさを大きくすることが目的で、こちらのul:width:100% で指定し(コンテンツ幅と一致)、li要素の幅をwidth:33.333%;で検証しました(期待したことは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いいねをした人: 居ません2020年8月5日 9:42 AM #54969リッチメディアの段組みには
flex
を使っているので、max-width
とflex-basis
の組み合わせで幅を変更できます。.c-entries--rich-media .c-entries__item { max-width: 50%; flex-basis: 50%; }
♥ 1いいねをした人: 居ません2020年8月5日 7:48 PM #55019ご回答、ありがとうございます。
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いいねをした人: 居ません2020年8月5日 7:51 PM #55020最近の投稿ブロックを入れているセクションブロックの設定がスリム幅になっていないでしょうか?そのCSSを追加してしまうとすべてのスリム幅が無効化されてしまうので、スリム幅の設定を外すのがベストだと思います。
♥ 0いいねをした人: 居ません2020年8月5日 10:00 PM #55026スリム幅で設定しておりました。ありがとうございました。
♥ 1いいねをした人: 居ません -
投稿者投稿
- トピック「投稿記事一覧の各コンテンツ(記事:リッチメディア)の大きさをcssで調節したい。(my snow monkey使用中)」には新しい返信をつけることはできません。