解説①～⑨まででパソコンディスプレイ向けのコーディングは終了しました。 続いて、スマートフォーンでも違和感なく見られるように調整を行っていきます。
1.ヘッダーからヒーローエリア
まず画面上部にあるヘッダーメニューとヒーローエリアを確認します。 設定が上手くて来ていれば、ナビゲーションは自動的に図のようなレイアウトに切り替わります。
ですが、画像が大きすぎて、背景画像が見えなくなっていますね。 文字サイズも大きすぎるので、cssで少し調節しましょう。
これだけでかなり見やすくなりました。
background-position
cssのbackground-positionプロパティは読んで字のごとく、背景画像を配置する位置を指定するプロパティです。初期値は「0 % 0%（ left top）」で左上の角同時を合わせているようなイメージです。
今回の場合は背景画像をBOXの中央に合わせるように指定することで、見切れてしまっていた男性の顔部分が表示されるようにしています。
2.About me部分の間隔を調整
次にAbout me部分を見てみましょう。
ボックスを横並びにする際に設定したマージンとパディングが邪魔をして、左揃えが崩れてしまっています。 スマホで見た時に左に揃うようにマージンの指定方法を変更しましょう。
変更するのはオレンジの点線で囲った３箇所。 md（タブレット幅）以上からマージンが適用されるように変更しています。
その下に続く<h2>の見出しとの間にも、少し余白があると見やすいですね。
h2にpt-5 pt-md-0 クラスを追加して下さい。
3.フォーム部分
サービスよりも下の部分はBootstrapのグリッドやテンプレートを使っているので、スマホ画面でも違和感なく表示されます。 (※配置や余白がに違和感がある方は修正してください)
ページ下部、お問い合わせフォーム等があるエリアは調整が必要。 そのままではみっちりと間隔が詰まっていて、見にくいですね。
ディスプレイ確認をしながらmarginやpaddingのクラスを加えていきましょう。
まずは上部。 「bg-white」クラスを適用したdivの位置を少し下げて、背景が見えるようにします。 フォーム側を囲っているdivには「pt-4 」クラスを加え、上辺から間隔をあけます。
次にPCだと左側に表示される「Get in Touch」のボックス。
フォームのボタンとの距離が近いので「col-md-6」クラスの後ろに「py-5」を加えます。
「bg-white」クラスを適用しているdivに「shadow」クラスを加えます。
最後にPCブラウザ幅、スマホ幅サイズでの表示確認をもう一度行いましょう。
違和感のある部分があれば微調整してください。 marginやpaddingは、解説と異なる指定でも綺麗にできていればOKです。