* { margin: 0; padding: 0; box-sizing: border-box; } .page { display: flex; flex-wrap: wrap; } .section { width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; } .menu { background-color: #5995DA; height: 80px; } .header { background-color: #B2D6FF; } .content { background-color: #EAEDF0; height: 600px; } .sign-up { background-color: #D6E9FE; } .feature-1 { background-color: #F5CF8E; } .feature-2 { background-color: #F09A9D; } .feature-3 { background-color: #C8C6FA; } .illustration img { width: 100%; display: block; } .header { height: auto; justify-content: inherit; align-items: inherit; } .photo img { width: 100%; display: block; } /* Mobile Styles */ @media only screen and (max-width: 400px) { body { background-color: #F09A9D; /* Red */ } } /* Tablet Styles */ @media only screen and (min-width: 401px) and (max-width: 960px) { .sign-up, .feature-1, .feature-2, .feature-3 { width: 50%; } } /* Desktop Styles */ @media only screen and (min-width: 961px) { .page { width: 960px; margin: 0 auto; } .feature-1, .feature-2, .feature-3 { width: 33.3%; } .header { height: 400px; } .sign-up { height: 200px; order: 1; } .content { order: 2; } }