Here is a site that uses responsive web design! It automatically adjusts to the optimal viewing point based on the size of the browser. It is important because people use the internet on such a wide variety of devices, and this is a much easier way to make sure everyone sees the best version of your website. A media query is a tag that makes a chunk of code only apply under certain conditions, and breakpoints are the spots at which the conditions change.
This is the largest size of the website. The high quality image fills the whole screen, and the badge in the middle is pretty large. It looks great on a high resolution screen!
This is the next breakpoint that is probably optimized for tablets. The picture continues to fill the whole screen, but the badge gets slightly smaller.
This is the mobile size for the website. They split the screen between the image and the information to make it easier to view and limit the need for scrolling on a mobile device.
