コンテンツを追加したらスマホ用レイアウトが崩れた!!
公開:2019.09.12 更新:2019.09.12

こんにちは、木彫り猫です。

という訳で今回はレスポンシブデザインの実践編です。

きっかけは突然だった……..。

新コンテンツを導入すると…… ?

私は先日、関連記事表示用のブロックをコーディングして導入したのですが……

そう!スマホ用のスタイリングを忘れていたのです!

おかげで記事ページが見るも無残な状態に……. ↓

PC用のスタイリングしかしていないので、盛大に横にはみ出しちゃってますね…..。

全は急げデス!早速取り掛かりますよ~

検証を開きます。

レスポンシブデザイン作業3

まずは該当部分を検証で試作していきます。

やはりマージンが広すぎるみたいですね。

レスポンシブデザイン作業4

大分ましになりましたがまだ足りません。

次は横幅をいじります。

レスポンシブデザイン作業5

横幅は治ったので、全体レイアウトも元に戻りました!

あともう少しです。

仕上げに画像の横幅と文字位置をいじります。

ちょっと文字が小さいように見えますね。上方パディングと一緒に文字サイズもいじります。

完成です!!

余白が寂しいのはオリジナルからそうなので気にしません。

それでは実際にCSSを打ち込んでいきます。優先順にも気を付けます。

出来たならスマホで見てみましょう!

作業後のスマホで見たページ

ん?iphone用にデザインしてしまったのでちょっと小さかったみたいですね。今度vwを使って直します。

まあとりあえずは普通に見れる状態になりました!

それでは。

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。