Responsive component with CSS Grid and Flexbox -- kind of mobile first

Try to avoid working with px, get familiar with "rem" instead. Also with margins try to use %, so website would be more responsive. If you need to change your layout in some ways for smaller screens use @media (max-width: <pixels>) { your code }. In "your code" you re-write your elements which you need to be changed on devices with smaller screen width than <pixels>. For instance: #wrapper { display: flex; flex-direction: column } #main-text { font-size: 1rem; } @media(max-width: 784px) { #wrapper { flex-direction: row } #main-text {font-size: 1.2rem; padding: 2%} }. Hope you understand :)