画像のようにページを開くとクラス"js"がつきpadding-bottom:60pxが反映させてしまい、余白が出てしまいます。
previewバーのhide barをクリックするとpadding-bottom:60pxはなくなるのですが、本番環境にも余白が出でしまいます。
何か解決方法はないでしょうか？
Topic summary
ユーザーがShopifyのPrestigeテーマを使用しているサイトで、html要素にjsクラスが付与されることでpadding-bottom: 60pxが適用され、ページ全体に不要な余白が発生する問題を報告。
問題の詳細:
- プレビューバーのhideをクリックしても余白が残る
- Shopifyストアにログインしていない状態でも同様の余白が発生
提案された解決策:
福水氏(ファイブビット)からの回答では、最新のPrestigeテーマでは同様の問題が確認できず、ストア構築時に追加されたカスタムコードやアプリが原因の可能性を指摘。
対処方法:
theme.cssに以下を追加:
html {
padding-bottom: 0px !important;
}
結果:
ユーザーはこの方法で対処し、問題が解決したことを報告。ただし、今後の不具合防止には開発コードやアプリの見直しが推奨される。
はじめまして。
株式会社ファイブビットの福水と申します。
上記ですが、Shopifyストアにログインしていない状態、例えば別の端末などでサイトを閲覧すると、padding-bottom:60px は反映されない仕様にはなっていないでしょうか？
もしそうでなければ、該当のストアのURLか、使用テーマをご教示いただければと思います。
ご返信ありがとうございます。
使用テーマはprestigeです。
Shopifyストアにログインしていない状態でもpadding-bottom:60pxがある状態です。
theme.cssのhtmlを
html {
padding-bottom: 0px !important;
}
Shopifyストアにログインしていない状態
にすることで余白はなくなりましたがこの方法より良い方法はありますでしょうか？
ご返信ありがとうございます。
私が持っている最新のprestigeテーマでは、同様の問題が発見できませんでした。
おそらくですが、ストア構築時の開発で追記されたコードかアプリが、不具合を起こしているかと思われます。
ただ、
html {
padding-bottom: 0px !important;
}
こちらの方法でも特に問題はないので、ちょっと月並みな表現ですが、直ったなら大丈夫、という感じです。
ただ、今使用されているprestigeテーマで、今後さらに不具合らしきものが起きたときは、入れているアプリか開発したコード(があれば)の見直しが必要かもしれません。
ご確認ありがとうございます。現在のところ問題はなさそうなのですのでこの方法で対処しました。
ご教示ありがとうございました。