Dawn10.0スライドショー画像をスマホサイズに切り替えたい

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

DAWN10.0を利用しています。

後述のQ&Aを参考にスライドショー画像をスマホサイズに切り替えようとしているのですが、

モバイル時の画像表示の大きさが拡大しすぎてしまっていたり、縮小しすぎてしまっています。

エラーメッセージを確認したところ、下記のカスタムCSSで赤字のセレクターがセクションで使用されていないようです。

原因及び、対処法をご教示いただけますと幸いです

〈参考にしたQ&A〉

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/dawn%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82%B7%E3%83%A7%E3%83%BC%E7%94%BB%E5%83%8F%E3%82%92%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%81%9F%E3%81%84/m-p/2021462/highlight/true#M7427

〈カスタムCSS〉

.pc-only {
  display: none;
}
.sp-only {
  display: block;
}
@media screen and (min-width: 750px) {
  .sp-only {
    display: none;
  }
  .pc-only {
    display: block;
  }
}
@media screen and (max-width: 749px) {
  slideshow-component .slideshow.banner .sp-only {
    height: 177.777vw;
  }
  .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt)
    .banner__content {
    min-height: 177.777vw;
  }
}
2

@miruto 様

ご質問についてですが、具体的な画面を見ることができないため、推測となりますが、テーマのバージョンやカスタマイズにより、構造が変わりエラーが発生している可能性があります。
参考にされている記事はDawnテーマ9.0.0向けですので、それをDawn10.0.0に合わせてCSSを調整しました。
下記CSSをDawn10.0.0のスライダーのカスタムCSSに適用したところ、エラーは表示されませんでしたので、こちらのCSSをご利用いただければと思います。

.pc-only {
  display: block;
}
.sp-only {
  display: none;
}
@media screen and (max-width: 750px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    height: 177.777vw;
    display: block;
  }
  .banner--small .banner__content,
  .banner--medium .banner__content,
  .banner--large .banner__content,
  .banner--adapt_image .banner__content {
    min-height: 177.777vw;
  }
}

また下記４行はスライドショーの設定で、「スライドの高さ」の「最初の画像に対応、大、中、小」の4つどれでも対応するために記載していますので、設定されているもの以外の3行でオレンジ色の波線が表示されますが登録には影響ありません。

.banner--small .banner__content,
.banner--medium .banner__content,
.banner--large .banner__content,
.banner--adapt_image .banner__content

Qcoltd_0-1694748391977.png
Qcoltd_0-1694748391977.png289×399 35.2 KB

ご参考まで
(キュー小坂)

3

ありがとうございます。

こちらのコードを該当スライドセクションのカスタムCSSに添付したのですが、下記の写真が添付の動画のように表示がされてしまいます。

原因をご教示いただくことは可能でしょうか？

(スライドの上部に白の空白も出現してしまいます)

26642145_l.jpg
26642145_l.jpg2720×1792 206 KB

4

@miruto 様

添付いただいた動画拝見しました。

CSSのバッティングなどが原因だとは思われますが、

現状では実際の画面を拝見できないと当たっている、状況確認が難しいです。

プライベートメッセージでサイトURLをいただけましたら、確認することができますので、ご連絡いただければと思います。

また、連休に入ってしまいますので、回答は連休明け以降になってしまいますので、ご了承ください。

5

ありがとうございます。

プライベートメッセージ送付させていただきました。

ご確認のほどよろしくおねがいします