Colevate Online Tech Tutorials

Breakpoints are the foundation of responsive web design, allowing your layout to adapt to different screen sizes. By using media queries with min-width, max-width, and orientation, you can apply specific CSS rules when certain conditions are met, ensuring a great user experience across all devices. This is a core concept for creating modern, mobile-friendly websites.

min-width

The min-width media feature applies CSS styles when the viewport width is greater than or equal to the specified value. This "mobile-first" approach is a common practice where you design for small screens first and then add styles for larger screens.

Example 1: Basic Mobile-First Grid

/* Style for a simple two-column layout on larger screens */
@media (min-width: 768px) {
  .container {
    display: grid; /* a two-dimensional grid-based layout system */
    grid-template-columns: 1fr 1fr; /* two equal-width columns */
    gap: 20px; /* space between grid items */
  }
}

Explanation

This code creates a two-column grid layout for viewports that are 768 pixels or wider. On screens smaller than 768px, the elements inside .container will stack vertically by default.

Example 2: Adjusting Font Size

/* Increase the base font size for better readability on tablets and desktops */
@media (min-width: 600px) {
  body {
    font-size: 18px; /* Larger font size for wider screens */
  }
}

Explanation

Here, the base font size of the body is increased to 18px when the viewport width is at least 600px. This enhances readability on larger devices.

Example 3: Showing a Sidebar

/* A sidebar that is hidden by default and appears on wider screens */
.sidebar {
  display: none; /* Hidden on mobile */
}

@media (min-width: 1024px) {
  .sidebar {
    display: block; /* a single block-level element that takes up the full width available */
    width: 250px; /* a CSS property that defines the width of an element */
  }
  .main-content {
    margin-left: 250px; /* a CSS property that defines the margin area on the left side of an element */
  }
}

Explanation

This CSS hides a sidebar on small screens. When the screen width reaches 1024px, the sidebar becomes visible, and the main content area is pushed to the right to accommodate it.

Example 4: Changing Navigation Bar Style

/* Transforming a mobile hamburger menu to a full navigation bar */
@media (min-width: 800px) {
  .mobile-nav {
    display: none; /* Hide the mobile navigation icon */
  }
  .desktop-nav {
    display: flex; /* a one-dimensional layout method for laying out items in rows or columns */
  }
}

Explanation

This example is for a navigation menu. On screens smaller than 800px, a mobile navigation (like a hamburger icon) would be shown. For viewports 800px and wider, the full desktop navigation is displayed as a flex container.

Example 5: Wider Content Area

/* Expanding the maximum width of the main content container */
.content {
  max-width: 90%; /* a CSS property that defines the maximum width of an element */
}

@media (min-width: 1200px) {
  .content {
    max-width: 1140px; /* a CSS property that defines the maximum width of an element */
  }
}

Explanation

This snippet ensures the content area uses 90% of the screen width on smaller devices but caps the width at 1140px on screens that are 1200px or wider to prevent the layout from becoming too stretched.

Example 6: Adjusting Image Sizes

/* Making images larger on bigger screens */
@media (min-width: 992px) {
  .gallery-image {
    width: 50%; /* Make images take up half the container width */
  }
}

Explanation

For viewports that are at least 992px wide, the images with the class .gallery-image will now occupy half of their container's width, making them appear larger.

Example 7: Complex Grid Layout

/* Creating a more complex grid for very wide screens */
@media (min-width: 1400px) {
  .product-grid {
    display: grid; /* a two-dimensional grid-based layout system */
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    gap: 30px; /* a CSS property that is a shorthand for row-gap and column-gap */
  }
}

Explanation

When the viewport width is 1400px or more, this CSS transforms a product listing into a four-column grid. This is useful for showcasing more products on very large desktop monitors.

CSS

Min Width