Have you ever wondered how a website can look great on your desktop and appear reformatted on your phone? The secret sauce is done via CSS Media Queries.
In a nutshell you define your styles for larger screens, and then override those styles with more mobile friendly options if the screen is smaller. You can specify the exact width which allows even to detect if someone is holding their device portrait or landscape.
Let’s look at how this can be accomplished with CSS rules.