Skip to main content
Practice

Media Query Practice

Websites are accessed from devices with varying sizes and resolutions. To accommodate these devices, web designers and developers use 'responsive web design' to ensure web pages look appropriate on all devices.

The key concepts in responsive web design are media query and breakpoint.


Reviewing Media Query​

A media query allows you to apply different style rules based on specific conditions (e.g., the width of the browser window). This enables you to adjust the layout, image sizes, and other styles of a web page according to the screen size or device type.


Reviewing Breakpoint​

A breakpoint is the point at which the layout or design changes based on the screen size or resolution. It serves as a reference point for applying styles tailored to the device's screen size.


Analyzing CSS Code:​

The CSS in this template applies styles using two breakpoints.

  1. Tablet:
CSS
@media (max-width: 1100px) {
  ...;
}

This media query defines styles that apply when the browser window's width is 1100px or less. Here, 1100px is used as a breakpoint for tablet devices.

  1. Mobile:
CSS
@media (max-width: 767px) {
  ...;
}

This media query defines styles that apply when the browser window's width is 767px or less. 767px is used as a breakpoint for mobile devices.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.