今日もブログのヘッダーサイズと格闘 - 茶道にアートに〜雪ノ下たますだれ〜

スマフォにはいい感じの大きさで反映されるようになりました。

あとはパソコンの画面。

私のCSSではPCとスマフォが連動しないようです。

ヘッダーの大きさは変わったりしましたが、横幅がページいっぱいまで広がることは無理のようです。

PC画面でヘッダーがおきくなると途端にスマフォでは見切れてしまいます。

イライラしますね。

 height: auto;
  width: 100%;
  max-width: 1000px;/* タイトル画像の横幅 */
  margin: 0 auto;

こういうのを追加すると全然ダメになりますね。

ヘッダーがどうしても右によらないとか、中央にきても左右の余白は絶対に消えないし、高さを調節するとスマフォで見切れます。

なのでもう諦めました。

background-size: contain；

このコードが全てを救ってくれました。

これはヘッダーの縦横比率をそのままにして配置してくれる魔法の言葉なのだそうです。

これならPC画面上でヘッダーが見切れることがなくなるんです。

えらく小さくなりますけどね。

スマフォでも余白ができましたが、タイトルは見れるようになりました。

こんなに手間がかかる上に解決しないなんて。大晦日からこんなにモヤモヤが残るとは。

ぐちぐちとお見苦しい記事になってしまいました。

皆様は良いお年をお過ごしください(^_-)-☆