From the course: Responsive Layout
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Media queries
- [Instructor] With a responsive website, you're usually going to change the layout of the page depending on the width of the user's viewport. Often we'll change the number of columns or move things around on the page but even with a very basic one-column site, you're still going to want to change things like line length to make sure the layout still looks good on any viewport size. The way we tell the browser to do something different based on the viewport width is through media queries. A media query is just like it sounds, a query or a question about the media that the webpage is being displayed on. The answer determines whether a section of CSS is applied when rendering the page. In CSS, media queries always start out with outside media followed by the actual query. So for example, here we have a page that's just an empty page with nothing in the body but I'm going to use a media query to change the background color of the page. So I'm going to start with @media and then I have…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.