「LION MEDIA」というテーマを使用中の素人です。
サイトロゴの設定は縦30pxですが、希望より小さいため 50px に表示されるように編集いたしました。
/* ヘッダーロゴサイズ変更*/ a.siteTitle__link { height: 50px; } .siteTitle { height: 50px; margin: 10px; } img.siteTitle__img { max-height:50px; } .siteTitle__sub { padding-top:15px; vertical-align:middle }
すると、スマホ表示の時に .container のエリアの縦が合わず、100pxとなってしまいました。
(公式サイトのデモでは50pxで収まっているので、2段になったものと思います)
スマホ/PCの見栄えの変更を様々なサイトを渡って、次のように書きましたが、改善されずでした。
{a.siteTitle__link { height: 30px; }} @media only screen and (max-device-width: 480px) /* スマホ用のCSS */ {.siteTitle { height: 30px; }} @media only screen and (max-device-width: 480px) /* スマホ用のCSS */ {img.siteTitle__img { max-height:30px; }} @media only screen and (max-device-width: 480px) /* スマホ用のCSS */ {.siteTitle__sub { padding-top:1px; vertical-align:middle }} @media only screen and (max-device-width: 480px) /* スマホ用のCSS */ {.container { height:30px; }}
こののち、どのように記述したら段ズレなどなしに表示できそうでしょうか。
お分かりの方がいらしたら、ご教示をよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー