アメーバオウンドのウェブサイトのカスタマイズ

今、アメーバオウンドのウェブサイトのカスタマイズを行っていますが、画面幅が色々あり、メディアクエリで対応する種類で、400px未満が最低ではなく、さらに300px未満の画面サイズのスマホにも対応するように作ることが必要と分かりました。Ameba Ownd (アメーバ オウンド) のメディアクエリは、800px以上がパソコン、これ以下がスマホをざっくりとした設定のようです。でも、実際には、800pxから600px、600pxから400px、400px未満など細かく設定した方が良いみたいです。さらに今回300px未満の画面サイズのスマホで表示確認をされている

Ameba Ownd (アメーバ オウンド) を使って作ったウェブサイトのカスタマイズは、制約が多いのでCSSの鬼になる位集中して作業が必要です。今回親要素の高さの克服のために、heigth:100vhを使うと良いことを知りました。また、リストについては、padding-inline-start: 40px;があるため、自動で右側にパディングが入ってしまいます。そのため、padding-inline-start: 0;が必要になります。今回単純な構成ではなく、親要素の中に二つ子要素を並べたデザインで、Ameba Ownd (アメーバ オウンド) を使って