次に正方形から正円になったuchi1(内側のbox)を縦に3つ並べられるようコピペします。uchi1のタグはdiv要素<div>とブロック要素なので、何も指定しなければ、縦並びになります。
これはそのまま、縦長が求められるスマホ画面用として活用できます。
また、ソースコードがPC画面に影響が及ばないよう、今までのコーディング内容にMedia Query指定をしておきます。(本来はPC用でも、スマホサイト用でも同じコーディングはMedia Queryの指定が必要ないのですが、バグが起こらないようにとりあえずこのように設定しておきます。)
@media screen and (max-width:960px) {.uchi1{width:90%;margin:2em;}}
因みにMedia Queryの記載では以下の注意が必要です。
@media screen and (max-width:960px) …○ andと( )の間に半角スペース
@media screen and (max-width:960px) …✕ andと( )の間に半角スペースなし
たかが半角スペースと思いますが、これがないとメディアQueryは全く効かないので、大変重要な要素です。覚えておきたいです。
ここで、スマホサイズ用としてuchi1boxにおいては、中身のタイトル文字と、img画像を引き連れて画面サイズが変わっても、位置関係が崩れないようになったはずです。