【ダイエット支援】スタイルの修正ってめんどくさいね・・・

【ダイエット支援】スマホからでも利用できるようにしたい

TechCommitでレイアウト崩れの相談をしたところ、

            .full-height {
                height: 100vh;
            }

これがあると、高い確率でスマホのレイアウトが崩れるらしい（と言う認識）

なので、削除。

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

display: flex;とflex-wrap: wrap;はセットで考えた方が良いらしい（という認識）

flex-wrap: wrap;を追加。

@media screen and (max-width:479px) {
    .title {
        font-size: 34px;
    }
    #whatsthis {
        margin-left: 10%;
        font-size: 10px;
    }
}

@media screen and (min-width:480px) and (max-width:959px){
    .title {
        font-size: 44px;
    }
    #whatsthis {
        font-size: 15px;
    }
}

@media screen and (min-width:960px) {
    .title {
        font-size: 84px;
    }
    #whatsthis {
        font-size: 20px;
    }
}

あとはメディアクエリを使って、ディスプレイのサイズに応じて、スタイルを切り替える、と言う手法を使うらしい。

レスポンシブデザインでは常套手段みたい。