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

**URL:** <https://community.shopify.com/t/dawn/299455>\
**Category:** Shopify テーマ\
**Created:** [February 25, 2024, 2:56am UTC](https://community.shopify.com/t/dawn/299455 "2024-02-25T02:56:46Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

Dawnテーマのモバイル表示で、テキスト付き画像セクションにおいて画像とテキストを横並びに配置する方法についての質問と解決。

**初期の問題:**
- デフォルト設定では画像が縦長に表示されてしまう
- 画像は535×535の正方形を使用
- 画像を左右に配置し、複数段重ねたい

**提案された解決策:**
カスタムCSSに以下のコードを追加:
```css
.image-with-text__media--placeholder > svg {
  height: auto;
}
.grid--1-col .grid__item {
  max-width: 50%;
  aspect-ratio: 1/1;
}
```

モバイル版では、フォントサイズやパディングの調整も含めた追加CSSが提供されました。

**結果:**
質問者は提案されたコードで問題を解決できたことを報告し、感謝の意を表明しました。

<div class="post-metadata">

**Author:** ![carma\_takuma](https://avatars.discourse-cdn.com/v4/letter/c/9de053/32.png) [@carma\_takuma](https://community.shopify.com/u/carma_takuma)\
**Post date:** [February 25, 2024, 2:56am UTC](https://community.shopify.com/t/dawn/299455/1 "2024-02-25T02:56:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [February 26, 2024, 1:21am UTC](https://community.shopify.com/t/dawn/299455/2 "2024-02-26T01:21:10Z")

</div>

質問拝見しました。

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

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

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

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

```

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

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

```

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

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

株式会社フルバランス

---

<div class="post-metadata">

**Author:** ![carma\_takuma](https://avatars.discourse-cdn.com/v4/letter/c/9de053/32.png) [@carma\_takuma](https://community.shopify.com/u/carma_takuma)\
**Post date:** [February 26, 2024, 4:44am UTC](https://community.shopify.com/t/dawn/299455/3 "2024-02-26T04:44:43Z")

</div>

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

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

.grid–1-col .grid\_\_item { max-width: 70%; }

.image-with-text\_\_media–placeholder\>svg{ height:auto; }

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

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

---

<div class="post-metadata">

**Author:** ![carma\_takuma](https://avatars.discourse-cdn.com/v4/letter/c/9de053/32.png) [@carma\_takuma](https://community.shopify.com/u/carma_takuma)\
**Post date:** [February 26, 2024, 10:47pm UTC](https://community.shopify.com/t/dawn/299455/4 "2024-02-26T22:47:15Z")

</div>

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

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

.grid–1-col .grid\_\_item { max-width: 70%; }  
.image-with-text\_\_media–placeholder\>svg{ height:auto; }

 ![IMG_1219.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/f/7/4f73e739b6893bede79b3b7dfb15ca9dd6ef4cb3.jpeg)

期待する画面

 ![IMG_1218.jpg](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/d/5d56cbc943a5cea7e7a8324f31b24a9c4ca82345.jpeg)

---

<div class="post-metadata">

**Author:** ![Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/anonymous_44fbe07fc59d9ccaacd70575fd5a5155/32/194200_2.png) [@Anonymous\_44fbe07fc59d9ccaacd70575fd5a5155](https://community.shopify.com/u/Anonymous_44fbe07fc59d9ccaacd70575fd5a5155)\
**Post date:** [February 28, 2024, 1:25am UTC](https://community.shopify.com/t/dawn/299455/5 "2024-02-28T01:25:24Z")

</div>

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

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

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

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

```markup
.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;
  }
}

```

 ![スクリーンショット 2024-02-28 10.19.28.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/a/0/8/a086c6db85445b53b266c686dbca7d33a46ad458.png)

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

---

<div class="post-metadata">

**Author:** ![carma\_takuma](https://avatars.discourse-cdn.com/v4/letter/c/9de053/32.png) [@carma\_takuma](https://community.shopify.com/u/carma_takuma)\
**Post date:** [March 3, 2024, 11:25pm UTC](https://community.shopify.com/t/dawn/299455/6 "2024-03-03T23:25:40Z")

</div>

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