SVGファイルにて、ヘッダーのロゴを作成を行い、入れ込みを行いました。
その際、ヘッダーの幅も変わってしまいます。
デフォルトの文字の部分のみ、オリジナルロゴに変更したいのですが、どのように行えばよいでしょうか。
（Dawnのバージョン15.2.0を使用、ロゴの配置は中央です）
お手数ですがご教示よろしくお願いします。
Topic summary
SVGロゴをShopifyテーマDawn（v15.2.0）のヘッダー中央に配置した際、ヘッダー全体の幅が変わってしまう問題が報告されました。
提案された解決策:
.header__heading-logoにmax-widthとheight: autoを設定してロゴサイズを制限.headerにheight: autoとpaddingを設定してヘッダー高さを調整
新たな課題:
提案されたCSSコードを適用したところ、PC表示は問題ないものの、スマホでレイアウトが崩れ（大きくなる）という新しい問題が発生しました。
現在の状況:
スマホ対応のCSS調整方法について追加の助言を求めている段階で、議論は継続中です。プレビューリンクやキャプチャ画像の共有により、より適切な解決策が提示できる可能性があります。
1 Like
質問拝見しました。
ロゴの大きさとヘッダーの高さを制限することによって、ヘッダーの幅を変えずに調整できるかと思います。
適宜cssのクラス名やサイズを変更して参考にしていただけますと幸いです。
ロゴのサイズ調整（CSS）
SVGロゴがヘッダー全体の幅を変えないようにCSSで制限を加えます。
・以下のCSSを追加します
.header__heading-logo
{ max-width: 150px; /* ロゴの最大幅 */
height: auto; /* 自動で縦横比を維持 */
}
ヘッダーの高さを調整
ロゴサイズに合わせてヘッダーの高さも調整します。
.header {
height: auto; /* 自動で高さを調整 */
padding: 10px 0; /* ヘッダー内の上下の余白を調整 */
}
上記で下記が解決できるかと思います。
・ロゴが大きくなりすぎるのを防止。
・ヘッダーの幅や高さが崩れない。
プレビューリンクなどの共有やキャプチャ画像などいただけたらもっと適切なcssなどを提示できるかと思います。
一度上記方法を参考にしていただけますと幸いです。
なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。
株式会社フルバランス
株式会社フルバランス様
コメントありがとうございます。
.header {
height: auto; /* 自動で高さを調整 /
padding: 10px 0; / ヘッダー内の上下の余白を調整 */
}
上記のコードを入れ込むとPCは問題ないのですが、スマホの全体のレイアウトが崩れてしまいます。
（大きくなってしまいます）
もしお分かりであればご教示お願いします。