新しいセクションに関する画像及び商品名・価格のcss設定について

日本語 ディスカッション 技術的なQ＆A
1

お世話になっております。

テーマ：Dawn

デフォルトの「You may also like」ではなく、
各商品ごとにおすすめ商品を指定できるセクションを設置したく、
新規セクションファイル（product-related-items.liquid）新規追加し、
メタフィールド（item.related）追加後、
related-items.cssを新規追加しましたが、思うようにいかない箇所があり、
具体的にご教授いただけないでしょうか。

どうぞよろしくお願い致します。

①モニタサイズに合わせて画像比率はそのままでサイズ変更するようにしたが、
商品名と値段のテキストが画像サイズ変更に合わせて移動しない。
（画像と重なったり、離れたりします…）

shopify0001.jpg
shopify0001.jpg1755×1241 124 KB

product-related-items.liquid


{{ ‘related-items.css’
related-items.css


.related__items-list {
margin-top: 2rem;
margin-bottom: 10rem;
padding: 0;
list-style: none;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
column-gap: 2rem;
row-gap: 2rem;
}



@media (min-width: 750px) {
.related__items-list {
justify-content: start;
}
}



.related__items-list h3 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}



.related__items-list .grid__col {
width: calc(50% - 1rem);
}



@media (min-width: 750px) {
.related__items-list .grid__col {
width: calc(100% * 1/4 - 2rem);
height: 300px;
}
}



.related__items-list img {
max-width:100%;
height: auto;
object-fit: cover;
}



.related__items-list .related__imgs {
height: 40vw;
}



@media (min-width: 750px) {
.related__items-list .related__imgs {
height: 100%;
}
}



.related__items-list .related__items-link {
text-decoration: none;
}



.related__items-list .related__items-link:hover {
opacity: .7;
}
2

Chromeでしか確認しておりませんが、

CSSを下記のようにされてはいかがでしょうか？

.related__items-list {
margin-top: 2rem;
margin-bottom: 10rem;
padding: 0;
list-style: none;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
column-gap: 2rem;
row-gap: 2rem;
}

@media (min-width: 750px) {
.related__items-list {
justify-content: start;
}
}

.related__items-list h3 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

.related__items-list .grid__col {
width: calc(50% - 1rem);
}

@media (min-width: 750px) {
.related__items-list .grid__col {
width: calc(100% * 1/4 - 2rem);
}
}

.related__items-list img {
max-width:100%;
height: auto;
object-fit: cover;
}

.related__items-list .related__items-link {
text-decoration: none;
}

.related__items-list .related__items-link:hover {
opacity: .7;
}

画像と文字が、離れてしまったり、重なってしまったりするのは理由はおそらく下記です。

  • liの高さを固定している
  • flexboxの要素に対してheight100%を指定すると、flexboxの子要素の高さが適用される

しっかり動作確認しておりませんので、

上記のコードは上記のコードで何か不具合があるかもしれません。

その場合は、ご連絡ください。

ご参考まで。

(キュー田辺)

1 Like
3

キュー田辺様

ご回答ありがとうございます。

出来ました！理由まで教えてくださり、感謝いたします。お手数をお掛けしました。

1 Like