FROM CACHE - jp_header

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

解決済

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

sea12
Shopify Partner
2 0 1

お世話になります。

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

 

Dawn(バージョン11.0.0)を使っています。

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

 

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

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

 

 

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

 

 

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

スクリーンショット 2023-09-13 10.56.37.png

 

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

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

 

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

1 件の受理された解決策

Takase_R
Shopify Partner
30 11 9

成功

はじめまして、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;
}

 

Takase_R_0-1694582375557.png

 

R.Takase
テーマのカスタマイズなどお手伝いできます。
https://liquid-guidebook.dev/

元の投稿で解決策を見る

2件の返信2

Takase_R
Shopify Partner
30 11 9

成功

はじめまして、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;
}

 

Takase_R_0-1694582375557.png

 

R.Takase
テーマのカスタマイズなどお手伝いできます。
https://liquid-guidebook.dev/
sea12
Shopify Partner
2 0 1

Takase_R様

 

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

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