投稿記事一覧の各コンテンツ(記事:リッチメディア)の大きさをcssで調節したい。(my snow monkey使用中)

  • このトピックには4件の返信、2人の参加者があり、最後にsuisuiにより1ヶ月、 2週前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #54958
    suisui
    参加者
    4

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

    【お使いの 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
    #54969
    キタジマ タカシ
    キーマスター
    286

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

    .c-entries--rich-media .c-entries__item {
      max-width: 50%;
      flex-basis: 50%;
    }
    1
    #55019
    suisui
    参加者
    4

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

    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
    #55020
    キタジマ タカシ
    キーマスター
    286

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

    0
    #55026
    suisui
    参加者
    4

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

    1
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「投稿記事一覧の各コンテンツ(記事:リッチメディア)の大きさをcssで調節したい。(my snow monkey使用中)」には新しい返信をつけることはできません。