Dawn のヘッダーを固定させたが、携帯のプレビューでアイコンが見切れてしまう

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

Dawnにてヘッダーを固定するため、base.css のMain Header Layout部分を以下に変更いたしました。

.header-wrapper {
  display: block;
  position:fixed;
  top: 0;
  background-color: rgb(var(--color-background));
  opacity: .9;
  z-index: 9999;
}

結果、ヘッダーが全幅では無く、短く左上に寄ってしまったので、width: 100vw; を追記いたしました。

PCでは問題なく全幅になりましたが、スマホのプレビュー画面ではアイコンが右にはみ出して見切れてしまいました。

2023-02-04-15.51.12.jpg
2023-02-04-15.51.12.jpg653×767 21.8 KB

対処方法をご教示頂けると助かります。

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

2

@ashmari 様

ご質問いただいている、Shopify管理画面でスマホ版のプレビュー画面でアイコンが見切れてしまう件ですが、『width: 100vw;』を『width: 100%;』に変更いただけましたら、見切れなくなるかと思います。

なお、現在の『width: 100vw;』指定でも、実機のスマートフォンで閲覧した際には、それほど気にならないかもしれません。

質問者様の添付画像を拝見しますと、「スクロールバー」でアイコンが隠れてしまっていますが、実機のスマートフォンでは、多くの場合、スクロール時のみスクロールバーが表示されるため、アイコンの上にスクロールバーが重なってしまっても、あまり気にならないかもしれません。

一度、iPhoneやAndroidの実機端末でご確認いただくと良いかと思います。

プレビュー時に画面下に出てくるバーに記載の「Share Preview」からURLをコピーして実機のスマートフォンからアクセスすると確認しやすいです。

ご参考まで。

(キュー小坂)

1 Like