Dawnテーマでのテキストつき画像で画像を左右に配置したい

[carma_takuma]

現在、Dawnを利用しています。モバイル表示の際に画像をテキストの左、またはテキストの右に配置したい場合どのように設定すればできますか？

[株式会社フルバランス]

質問拝見しました。

DAWNのデフォルトで備わっている画像付きテキストセクションをご利用の場合は以下コードが有効です。

写真とテキストを横に並べたい場合は、

セクションのカスタムCSSに以下コードを入れてみてください

.grid--1-col .grid__item {
  max-width: 50%;
}

この場合画像が縦長になってしまう場合あるのでいちおうそちらを修正できる以下コードもご参考までにしてください。

.image-with-text__media--placeholder>svg{
  height:auto;
}

こちらコードでモバイル版でも横並びになります。

お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

[carma_takuma]

ありがとうございます！！！！
途方にくれていたので返信いただき本当に感謝です。

早速、テキストつき画像のカスタムCSSに以下を入れてみたところ、やはり以下のような縦長になってしまいました。

.grid--1-col .grid__item { max-width: 70%; }

.image-with-text__media--placeholder>svg{ height:auto; }

文字はそれぞれ小をえらんでおり、画像は正方形の535*535というサイズにしています。
期待値としては以下のようにしたいのですが、良い方法あったらご教示いただけますと幸いです。

(テキスト付き画像を何段か重ねて配置し、画像を左においたり、右においたりも可能なら指定したいです)
質問ばかりですみません。よろしくお願いいたします

[carma_takuma]

画像が添付できてなかったので添付します

以下のCSSを設定したときの挙動

.grid--1-col .grid__item { max-width: 70%; }
.image-with-text__media--placeholder>svg{ height:auto; }

期待する画面

[株式会社フルバランス · Accepted solution]

イメージ画像ありがとうございます！

画像が正方形の場合ですと、以下コードでdawnのデフォルトは、以下コードで対応できました（イメージ画像添付）

文字サイズに関しては適宜調整していただければと思います。

またモバイル版のcssになりますので少し追加もございます。

.image-with-text__media--placeholder > svg {
  height: auto;
}
.grid--1-col .grid__item {
  max-width: 50%;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 749px) {
  .image-with-text__content {
    padding: 5px;
  }
  .image-with-text__heading {
    font-size: 12px;
  }
  .image-with-text__text {
    font-size: 10px;
  }
}

 

コピペで利用できるかなと思いますのでご参考までにお願いします。

[carma_takuma]

解決しました！ありがとうございました