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

**URL:** <https://community.shopify.com/t/dawn/189113>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [February 4, 2023, 6:59am UTC](https://community.shopify.com/t/dawn/189113 "2023-02-04T06:59:43Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

Dawnテーマでヘッダーを固定するため、`base.css`の`.header-wrapper`に`position: fixed`などを追加したところ、PCでは問題なく全幅表示されるが、Shopify管理画面のスマホプレビューでアイコンが右側に見切れる問題が発生。

**原因と解決策:**
- ヘッダーが左上に寄って全幅にならなかったため、`width: 100vw;`を追加したが、これによりスマホプレビューでスクロールバーとアイコンが重なり見切れが発生
- 解決方法として`width: 100vw;`を`width: 100%;`に変更することが提案された

**補足:**
- `100vw`指定でも実機のスマートフォンでは問題が目立たない可能性がある
- 実機(iPhone、Android端末)では通常スクロール時のみスクロールバーが表示されるため、アイコンとの重なりはあまり気にならないかもしれない
- 「Share Preview」のURLから実機でアクセスして確認することが推奨されている

<div class="post-metadata">

**Author:** ![ashmari](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ashmari](https://community.shopify.com/u/ashmari)\
**Post date:** [February 4, 2023, 6:59am UTC](https://community.shopify.com/t/dawn/189113/1 "2023-02-04T06:59:43Z")

</div>

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

```css
.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](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/7/d79759883e4f99860422a860bc3dec93f2bb529f.jpeg)

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

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

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [February 6, 2023, 11:06am UTC](https://community.shopify.com/t/dawn/189113/2 "2023-02-06T11:06:48Z")

</div>

@ashmari 様

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

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

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

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

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

ご参考まで。

(キュー小坂)