レスポンシブデザインの調整

Question

こちらのページですが4カラムのものをスマホにしたときはフロートを解除しています。ただタブレットやノートPCのデバイスでみた際にはみ出してしまうのが、気になります。こちらはどのように改善すればうまくいきますか？ご教示お願い致します。https://obot-ai.com/lp/Obot_fee.html

Accepted Answer

ECマスターズの田中です。いただいたページを確認した所、フロートというよりはFlexboxの仕組みで作られており、横幅によって縦に並ぶか横に並ぶかが決められ、また各要素の幅も固定となっております。PCで見る前提としても、全体を表示するために最低1800pxの横幅が必要となり、たとえば横幅1600pxのモニターで閲覧しようとすると、PCであっても横が見切れてしまいます。横幅によって並ぶ方向を決めるのではなく、常に横並び、かつ折返しを有効にし、（つまり flex-direction: row; flex-wrap: wrap; ）各要素の横幅は親要素との割合で決めるようにしていただくことで、各デバイスで見やすいページ作りができると思います。（たとえば、スマホなら100%にして横１列、　タブレットなら48%にして横２列、　PCなら24％にして横４列に並べる、など）

レスポンシブデザインの調整

カテゴリーから探す