「スマホで見たら崩れてた」──HPのモバイル表示バグを発見して直した話
こんにちは、どんぐり村長です。
先日、スマホでHPを確認したら、レイアウトが崩れていました。
PCで見ると綺麗に3列に並んでいたカードが、スマホでも3列のまま表示されていて、文字が小さすぎて読めない状態に。
「あ……これ、気づかなかった」
今日はそのバグを発見して直した話を書きます。
どのページで崩れていたか
崩れていた箇所は主に2つありました。
① 「無料で試せるコンテンツ・ツール」セクション
このセクション、PCでは3つのカードが横に並んでいます。スマホでも同様に3列になっていて、カードが極端に小さくなっていました。
② 「三橋ベース」動線セクション
HP制作の案内セクションで、左にテキスト・右にサービス一覧という2列のレイアウトがあります。スマホでも2列のままで、テキストが横に押し潰されていました。
なぜ崩れていたのか
ここから先は
1,592字
よろしければ応援お願いします！ いただいたチップはプログラミングチャレンジの活動費用として使わせていただきます！