Dawnテーマでヘッダーを固定するため、base.cssの.header-wrapperにposition: fixedなどを追加したところ、PCでは問題なく全幅表示されるが、Shopify管理画面のスマホプレビューでアイコンが右側に見切れる問題が発生。
原因と解決策:
width: 100vw;を追加したが、これによりスマホプレビューでスクロールバーとアイコンが重なり見切れが発生width: 100vw;をwidth: 100%;に変更することが提案された補足:
100vw指定でも実機のスマートフォンでは問題が目立たない可能性がある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では問題なく全幅になりましたが、スマホのプレビュー画面ではアイコンが右にはみ出して見切れてしまいました。
対処方法をご教示頂けると助かります。
どうぞよろしくお願いいたします。
@ashmari 様
ご質問いただいている、Shopify管理画面でスマホ版のプレビュー画面でアイコンが見切れてしまう件ですが、『width: 100vw;』を『width: 100%;』に変更いただけましたら、見切れなくなるかと思います。
なお、現在の『width: 100vw;』指定でも、実機のスマートフォンで閲覧した際には、それほど気にならないかもしれません。
質問者様の添付画像を拝見しますと、「スクロールバー」でアイコンが隠れてしまっていますが、実機のスマートフォンでは、多くの場合、スクロール時のみスクロールバーが表示されるため、アイコンの上にスクロールバーが重なってしまっても、あまり気にならないかもしれません。
一度、iPhoneやAndroidの実機端末でご確認いただくと良いかと思います。
プレビュー時に画面下に出てくるバーに記載の「Share Preview」からURLをコピーして実機のスマートフォンからアクセスすると確認しやすいです。
ご参考まで。
(キュー小坂)
