Responsive Design

Websites today are viewed on a variety of devices, not just on large displays anymore, but also small screen sizes that fit in your pocket. Websites used to be made for one screen size and that was it. However that can't be the case anymore. Creating a page to only fit a large display will make it look weird on small devices. (and vice-versa) This is where Media Query, a powerful CSS feature comes in. Media Query checks the device size that the page is being loaded on and uses only the code meant for that screen size or screen size range. This creates a mobile-friendly environment where the native page fits both desktop and mobile devices instead of redirecting mobile devices to a separate mobile-friendly page. 

The Huntsville Middle School FBLA page has plenty of examples of Media Query existing. Mostly in images, it allows smaller devices to experience the full image instead of the image being too big or cut off. For the rest of the design, you can see CSS Grid in action to make text and other elements fall in a perfect place for mobile devices.  Below you can see an example of a page using media query and CSS Grid to change the size of a YouTube Video thumbnail and the location of the text beside it.