横並びを縦積みに変える｜カードが潰れる問題

PCで横に3枚並べたカードは、スマホ幅ではそのままだと1枚あたり100px程度になり、文字が読めません。横並びの解除は、レスポンシブ対応で最も頻度の高い作業です。

切り替えの手順

操作自体は単純で、スマホ幅に切り替えた状態で、親ボックスの並べ方を「縦積み」に変えるだけです。子のカードには一切触りません。

縦に積んだときの並び順

横並びのときは左から順、縦積みにすると上から順になります。左右分割のセクションでは、この順序が意味を持ちます。画像が先か、文章が先か——スマホでは必ずどちらかが先に来ます。

折り返しで足りる場合

要素が4つ以上あり、件数も変わる一覧では、縦積みにせず「折り返し」を使うほうが自然なことがあります。タブレットでは2列、スマホでは1列、と自動的に変わります。

次は文字サイズの調整です。