76/365: CSS Media Query Breakpoints

While working on the capstone app today I implemented a CSS media query into one of the components. This query modifies the grid layout and rearranges the item. On desktop view, the header is above the image with the image on the left, and text to the right. However on mobile view, the media query kicks in at a 600 pixel screen width breakpoint and realigns the items to put the header on top, the image under it, and the text under that. Using the virtual smartphone in the browser dev tools is a good way to visualize how your app or website will appear on a phone.