MediaQuery & CSS
CSS is a programming language that describes the way a html document is presented. Cascading Style sheets or CSS adapts web pages to multiple screen sizes, layouts, fonts, as well as colors. From the beginning of my journey through Flatiron & Web Development in general I knew of CSS and the basics. But with the help of freeCodeCamp I’ve been able to dive deeper into aspects of Responsive Web Design that I’ve never known before. With a few principles we dive into with this blog; you’ll understand a few of the new tenants that have helped boost my CSS prowess in the past weeks.
Media Queries change the content of the web page based on the viewport size; in other words you’ll see different styling based on whether a user is on a fullscreen desktop vs. an Ipad or an Iphone. In this example we have a p tag with a CSS styling for the font-size to be at 20px. Unfortunately when the height of the device is less than or equal to 800px the font is too big. But thanks to media queries we can easily solve this problem.
We start the media query by putting in our specifications. Since the device’s max height is equal to 800px we’ll input “@media (max-height: 800px) “ then immediately after we can add curly brackets and input our css rules. For this example we’ll have it look something like this
