Hackforge Academy

Explanation

Media queries apply different CSS styles based on screen size, orientation, or device characteristics.

Code:

@media (max-width: 768px) {
  body {
    background: lightgray;
  }
}

Explanation

You can change font sizes for smaller screens to improve readability.

Code:

@media (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
}

Explanation

Media queries can change layout direction from horizontal to vertical on mobile devices.

Code:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Explanation

Different styles can be applied for larger screens using the min-width condition.

Code:

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
}

Explanation

Multiple media queries can be combined to create fully responsive layouts across various devices.

Code:

@media (max-width: 480px) {
  .menu {
    display: none;
  }
}