- このトピックには2件の返信、2人の参加者があり、最後に
により2年、 6ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 16.5.4
【お使いの Snow Monkey Blocks のバージョン】バージョン 15.0.6
【お使いの Snow Monkey Editor のバージョン】バージョン 7.0.1
【お使いのブラウザ】Google Chrome
【当該サイトのURL】https://creative-ocean-design.com/rise-nexter/### 実現したいこと
トップ画面に実装しているパネルを、縦長から正方形に変えたい
### 発生している問題
思いつく限り、Chromeの検証機能を使ってCSSを変更しているが、正方形にできない
### 試したこと
当てたCSS=
height: 24vw;①パネル自体にCSSを当てると、後ろの要素は小さくなるが、画像や画像上の文字とボタンはそのまま。
（パネル自体＝
wp-block-snow-monkey-blocks-panels-item-block-link c-row__col panel-height）②パネルの中の要素に対しても同様の作業をしたが、①と同じ結果に。
（パネルの中の要素=
smb-panels__item smb-panels__item--block-linkこちらも同様→
smb-panels__item__body）cssの当てる場所が悪いのかと試しましたが、うまくいかず、6時間ほど彷徨っております。泣
お忙しいかと思いますが、教えていただけますと嬉しいです。
よろしくお願いします。
いいねをした人: 居ません@いとすりょう さんがご提示されているサイトを現状のまま試すと、（たぶん）以下のCSSで正方形になると思います。
.smb-panels__item { overflow: hidden; } .smb-panels__item::before { content: ""; display: block; padding-top: 100%; } .smb-panels__item__body { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: auto; min-width: auto; object-fit: cover; object-position: 50% 50%; }ただ、このままですと、ページタイトルとMoreがズレます。
この要素を入れている.wp-block-cover__inner-containerを、上下中央になるように追加の記述が必要になると思います。
一度お試しくださいませ。いいねをした人: 居ません
- トピック「パネルを正方形にしたい」には新しい返信をつけることはできません。