DAWNの「テキスト付き画像」で背景色を全幅にしたい

[sea12]

お世話になります。

カスタマイズがうまくいかず質問させていただきます。

Dawn（バージョン11.0.0）を使っています。

カスタマイズ画面のセクションで「テキスト付き画像（image with text）があるかと思いますが、そちらについての質問です。

テキスト付き画像セクションにカスタムcssで

以下のように背景色をつけました。

.image-with-text {
  background-color: #edf3f3;
}

セクションには背景色がついたのですが、添付画像の通り、左右の余白は白のままです。

この左右の余白部分まで全て背景色をつけたいのですが、どのようにしたら実現できますでしょうか。

解決方法がありましたら教えてください。

よろしくお願いいたします。

[Takase_R · Accepted solution]

はじめまして、Takaseと申します。

下記のようにカスタムcssを変更すれば、添付画像のように全て背景色がつくかと思います。

「max-width: 120rem; /* 任意の幅を指定 */」

の箇所は、画像とテキストのコンテンツの最大幅になりますので適宜変更してみてください。

.image-with-text {
  background-color: #edf3f3;
  width: 100%;
  max-width: 100%;
}
.image-with-text__grid {
  max-width: 120rem; /* 任意の幅を指定 */
  margin: 0 auto;
}

[sea12]

Takase_R様

アドバイスありがとうございます。

試しまして、希望通りのデザインにすることができました。ありがとうございました。