モバイル版ヘッダーがレスポンシブデザインにならない件、解決
何時間もCSSやhtmlをいじってやっと設定の方法がわかりました。
何時間も
.header {
position: relative;
max-width: 90% ; /* 横幅の90% */
height: auto ; /* 縦幅を自動調整 */
}
なんてのをCSSに追加しても全く変化せず
本当に困っていたのですが
ふとMinimalistテンプレートのフォルダを開いてみると
ヘッダーの設定方法らしき画像が。
ヘッダー画像のプレースメントの設定が
上から二番目を選ぶように指定されています。
自分の設定だと、一番上の設定にしていたんです。
しかし、マニュアルでは二番目の設定にするようになっている。。。
サンプルの画像も、「こうすればモバイル版のヘッダーもうまくハマるぜ」
と言っているかのようです。
試しに2番目「タイトルと説明の代わり」に設定してみると
ヘッダーが小さくなった？
設定したCSSが邪魔をしているのかも、と思い
追加したCSSを全削除、htmlのいじった部分をもとのコードに書き換えると
ヘッダーの大きさが元に戻りました。
そしてスマホで確認。
やった・・・
ヘッダーがマトモな大きさになりました
ﾟﾟ(´O｀)°゜ﾟ
ていうかMinimalistのマニュアルとっても親切でした。
モバイル版もPC表示で設定するように解説してありましたね。
気がつきませんでした。マニュアルはちゃんと読みましょう。
モバイル版ヘッダー、もう少し大きくてもいいかなと思ってるんですが
まあいいかな・・・
これで一件落着
ネームに入れます😃
Minimalistは無料テンプレートなのにとっても親切なんですね。
0 件のコメント:
コメントを投稿