.skillSection { padding-top: 10vh; display: flex; flex-direction: row; min-height: 100vh; align-items: flex-start; } .picContainer { min-width: 50%; display: inline-block; text-align: justify; color: #f0f0f0; padding: 0 50px 0 200px; margin-left: auto; margin-right: 0; padding-top: 5%; visibility: visible; position: static; } .picContainer p { margin: 0; } .keywords { display: inline-block; text-align: left; min-width: 50%; margin-left: 0; margin-right: auto; } .skillCategory { text-transform: uppercase; color: red; font-weight: bold; } .skillDetails { color: #d0d0d0; list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; max-width: 70%; } .skillDetails li { display: inline; } .skill { padding-right: 15px; font-size: 1.2em; } .skillHighlight { font-size: 2.3em; } .expHighlight { font-size: 1.5em; } .descHighlight { display: inline-block; font-size: 1.2em; } .contactForm { color: #f0f0f0; padding: 50px 0 80px 0; background: #555555; } .contactField { width: 98%; margin: 10px 0 10px 0; } .formButton { background: red; color: #f3f3f3; border: none; padding: 5px 20px; font-size: 1em; } @media only screen and (max-width: 768px) { .skillSection { display: inline-flex; padding-top: 12vh; flex-direction: column-reverse; align-items: initial; } .picContainer { min-width: 95%; max-width: 95%; color: #f0f0f0; margin: 0 10px 0 10px; padding: 5px 3px 5px 3px; text-align: center; flex-grow: 1; } .skillHighlight { font-size: 1em; } .expHighlight { font-size: 0.8em; } .descHighlight { font-size: 0.9em; } .keywords { min-width: 0; max-width: 100%; text-align: center; margin-right: 0; } .skillDetails { padding: 0; margin: 0; max-width: 100%; display: table; margin: 0 auto; flex-grow: 1; } .skill { padding: 5px; font-size: 1em; } .contactForm { padding: 20px 0 50px 0; } .contactField { width: 98%; margin: 10px 0 10px 0; } .descHighlight { display: block; } .skillContent { margin-top: 20px; background-color: #555555; } }