Webbo3 Data Analysis Bootcamp · Web Development Module · Lesson 4

Responsive Design: Mobile-First Approach, Media Queries, Breakpoints, and Responsive Images

A hands-on lesson covering how to build websites that adapt to any screen size, starting from mobile and scaling up, using media queries, standard breakpoints, responsive images, and the viewport meta tag.

In 2026, mobile devices account for over 60 percent of global web traffic. In Nigeria, that figure is even higher. If your website does not work on a phone, it does not work for the majority of your audience. Responsive design is the practice of building one website that looks and functions correctly on a phone, a tablet, a laptop, and a desktop monitor, without creating separate versions for each. This lesson teaches you the mobile-first approach, which is the industry standard: you design for the smallest screen first, then use media queries to add complexity as the screen grows. You will learn standard breakpoints, how to write media queries with min-width and max-width, how to serve appropriately sized images, and why the viewport meta tag is non-negotiable. By the end, you will be able to take any static layout and make it respond gracefully to any device.

1. The Mobile-First Approach

There are two ways to approach responsive design: desktop-first and mobile-first. Desktop-first means you design the full desktop layout first, then use media queries to strip away features and simplify as the screen shrinks. Mobile-first means the opposite. You design the simplest, narrowest layout first, then use media queries to add features and expand the layout as the screen grows. Mobile-first is now the industry standard, and for good reason.

Why mobile-first wins. When you start with desktop, you tend to add complexity generously: wide navigation bars, multi-column grids, hover-dependent interactions, and large hero images. Then when you try to squeeze that complexity onto a phone, you are forced to remove things, hide things, and compromise. The result often feels like an afterthought. When you start with mobile, you are forced to prioritize. A phone screen has no room for secondary features. You must decide what matters most. That discipline produces cleaner, more focused designs. When you expand to tablet and desktop, you are adding space for things you already decided were important, not trying to cram an overloaded desktop layout into a pocket.

How it works in CSS. In a mobile-first stylesheet, your default styles, the ones outside any media query, target the smallest screens. Then you add min-width media queries to override or enhance those styles for larger screens. This means your base CSS is lean, and your enhancements are progressive. If a browser does not support media queries, which is rare in 2026, it still gets the mobile layout, which is usable. This is graceful degradation by default.

Practical example: a navigation bar. On mobile, your navigation is a single column of stacked links, perhaps hidden behind a hamburger menu. That is your default CSS. On tablet, you might expand it to a horizontal row of links. On desktop, you might add a search bar and a user avatar beside the links. Each enhancement lives inside its own media query. The mobile user never downloads or processes the desktop enhancements, because their screen width never triggers those queries. This is efficient.

Performance implications. Mobile users often have slower connections and limited data. Mobile-first CSS tends to be smaller because the base stylesheet contains only what is essential. Images, fonts, and scripts needed only for desktop can be loaded conditionally. This is not just a design philosophy. It is a performance strategy that directly affects user experience, especially in markets where mobile data is expensive.

2. Media Queries: min-width and max-width

A media query is a CSS rule that applies styles only when certain conditions are met, most commonly the width of the browser viewport. It is the engine of responsive design. Without media queries, your layout would look identical on every device, which means it would be perfect on one size and broken on all others.

The basic syntax. A media query wraps a block of CSS and attaches a condition:

@media (min-width: 768px) {
  .container {
    display: flex;
    flex-direction: row;
  }
}

This says: apply the styles inside this block only when the viewport is at least 768 pixels wide. On screens narrower than 768 pixels, this block is ignored. The .container element retains whatever styles were defined outside the media query, which in a mobile-first approach would be a single-column layout.

min-width versus max-width. min-width means the styles apply at this width and above. It is the mobile-first approach: start small, add complexity as the screen grows. max-width means the styles apply at this width and below. It is the desktop-first approach: start large, simplify as the screen shrinks. You can use both in the same stylesheet, but most modern projects rely primarily on min-width. Here is how max-width looks:

@media (max-width: 767px) {
  .sidebar {
    display: none;
  }
}

This hides the sidebar on screens 767 pixels wide or narrower. It is useful for exceptions, but if your entire responsive strategy is built on max-width, you are working desktop-first. Be consistent. Choose one approach and stick to it.

Combining conditions with and. You can create a range where styles apply only between two widths:

@media (min-width: 768px) and (max-width: 1023px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

This applies a two-column grid only on screens between 768 and 1023 pixels wide, which is the typical tablet range. On phones, the grid remains single-column. On desktops, a wider media query overrides this with three or four columns. Range-based queries are useful when a specific layout only makes sense at a particular size, but overusing them makes your stylesheet harder to maintain. Most projects use only min-width queries stacked from small to large.

Orientation queries. You can also query the device orientation:

@media (orientation: landscape) {
  .hero-image {
    height: 60vh;
  }
}

This adjusts the hero image height when the phone is turned sideways. Orientation queries are less common than width queries but valuable for specific cases like video players and game interfaces.

3. Standard Breakpoints: 480px, 768px, 1024px, 1280px

Breakpoints are the specific viewport widths where your layout changes. They are not arbitrary numbers. They correspond to the widths of common device categories. While you can define as many breakpoints as you want, most professional projects standardize on a small set to keep the stylesheet maintainable.

480px: large phones and small tablets. Most modern smartphones are between 320 and 414 pixels wide in portrait mode. The 480px breakpoint catches larger phones, like the iPhone 14 Pro Max at 430 pixels, and small tablets in portrait mode. At this breakpoint, you might increase font sizes slightly, add a bit more padding, or switch from a single column to a two-column grid for very simple layouts.

768px: tablets and small laptops. The iPad in portrait mode is 768 pixels wide. This is the most common tablet breakpoint. At 768px and above, you typically switch from stacked mobile layouts to multi-column grids. Navigation bars expand from hamburger menus to horizontal links. Sidebars become visible. Content areas widen from full-width to a centered container with margins.

1024px: tablets in landscape and small desktops. The iPad in landscape mode is 1024 pixels wide. This breakpoint is where you start treating the device as a desktop experience. Multi-column grids expand to three or four columns. You might introduce a fixed sidebar beside the main content. Font sizes can increase for better readability at arm's length.

1280px: standard desktops and large screens. Most desktop monitors are at least 1280 pixels wide. At this breakpoint, you can use wider containers, larger images, and more generous spacing. You might add a secondary sidebar, increase the maximum width of your content area, or introduce hover effects that do not make sense on touch devices.

A typical mobile-first breakpoint stack looks like this:

/* Mobile default: single column, stacked layout */
.container {
  padding: 16px;
}

/* Large phones and small tablets */
@media (min-width: 480px) {
  .container {
    padding: 24px;
  }
}

/* Tablets */
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* Small desktops */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large desktops */
@media (min-width: 1280px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin: 0 auto;
  }
}

Notice that each breakpoint only overrides what needs to change. The padding set at 480px carries through to 768px, 1024px, and 1280px unless explicitly overridden. This is the cascade working in your favor. Avoid redeclaring the same properties at every breakpoint unless they actually change.

4. Responsive Images with srcset

Images are often the largest files on a webpage. Serving a 2000-pixel-wide hero image to a phone with a 375-pixel screen is wasteful. It consumes bandwidth, slows page load, and costs mobile users money. The srcset attribute lets you provide multiple versions of the same image and let the browser choose the most appropriate one based on the device's screen width and pixel density.

The basic srcset syntax. Instead of a single src attribute, you provide a comma-separated list of image URLs with their intrinsic widths:

     src="hero-1280.jpg"
     alt="NovaMart storefront">

The w after each number stands for width descriptor. It tells the browser the intrinsic width of each image file in pixels. The browser combines this information with the device's screen width, pixel density, and network conditions to pick the optimal image. On a standard phone, it might choose hero-480.jpg. On a retina iPad, it might choose hero-768.jpg or hero-1024.jpg because retina screens need higher resolution images to look sharp. The src attribute is a fallback for browsers that do not support srcset, which is virtually none in 2026, but it is required for valid HTML.

Combining srcset with sizes. The sizes attribute tells the browser how large the image will actually be displayed on the page, which helps it choose the right source even before CSS has loaded:

     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 50vw,
            33vw"
     src="hero-1280.jpg"
     alt="NovaMart storefront">

This sizes attribute says: on screens up to 480px wide, the image will occupy 100 percent of the viewport width. Between 480px and 768px, it will occupy 50 percent. Above 768px, it will occupy 33 percent. The browser uses this information, combined with the viewport width, to calculate the optimal image resolution to download. Without sizes, the browser assumes the image will be full-width, which may cause it to download an unnecessarily large file.

Art direction with picture and source. Sometimes you need different images entirely, not just different sizes of the same image. A wide hero banner might need to be cropped to a square on mobile. The picture element handles this:

On screens 768px and wider, the browser uses hero-desktop.jpg. Between 480px and 767px, it uses hero-tablet.jpg. Below 480px, it falls back to the img element and uses hero-mobile.jpg. The picture element is powerful but should be used only when the image content genuinely changes, not just for scaling. For simple scaling, srcset is more efficient.

5. The Viewport Meta Tag

Without the viewport meta tag, mobile browsers render your page at a default width of around 980 pixels and then zoom out to fit the entire page on the screen. The result is text so small it is unreadable, and users must pinch and zoom to interact with anything. The viewport meta tag tells the browser to use the actual device width as the viewport width and to respect your CSS scaling instructions.

The standard viewport tag. Place this inside the head section of every HTML document:

Breaking this down: width=device-width tells the browser to set the viewport width equal to the physical width of the device screen. On an iPhone 14, that is 390 pixels in CSS pixels. On a Samsung Galaxy S24, it is 360 pixels. initial-scale=1.0 sets the zoom level to 100 percent when the page first loads. Without this, some browsers apply an arbitrary initial zoom that breaks your layout.

Why this tag is non-negotiable. Every responsive design relies on media queries that reference the viewport width. If the viewport meta tag is missing, the browser reports a width of 980 pixels regardless of the actual device, and your mobile media queries never trigger. Your carefully crafted mobile layout is ignored, and the desktop layout is squashed onto a phone screen. This single line of HTML is the difference between a responsive site and a broken one. Omitting it is the most common responsive design mistake among beginners.

Additional viewport properties. You can add more controls, but use them sparingly:

maximum-scale=1.0 prevents users from zooming in. user-scalable=no disables zooming entirely. These are almost never appropriate. They break accessibility for users with vision impairments and frustrate users who want to zoom in on small text or images. The only acceptable use case is a full-screen web application where pinch-to-zoom would interfere with custom gestures, and even then, accessibility guidelines strongly discourage it. Stick to width=device-width, initial-scale=1.0 for virtually every project.

Testing without a physical device. You do not need a phone to test responsive design. Every modern browser has device emulation tools. In Chrome, press F12 to open DevTools, then click the device toolbar icon, which looks like a phone and tablet, or press Ctrl + Shift + M. You can select specific devices, like iPhone 14 or Samsung Galaxy S24, and the browser will render your page at that device's exact dimensions and pixel density. You can also drag the viewport edge manually to test every width between breakpoints. Test at 320px, 375px, 414px, 768px, 1024px, and 1280px at minimum. Resize slowly and watch for layout breaks between your defined breakpoints.

Using AI to Move Faster in Responsive Design

Responsive design involves a lot of repetitive CSS: media queries at standard breakpoints, flexbox and grid layouts, image sizing rules, and font scaling. AI can generate this boilerplate instantly, letting you focus on the design decisions rather than the syntax.

1. Generate a complete mobile-first CSS framework with natural language.
Instead of writing every media query from scratch, describe your layout to an AI assistant: "Generate a mobile-first CSS stylesheet for a product listing page with a header, a sidebar, a main content area with a card grid, and a footer. Use standard breakpoints at 480px, 768px, 1024px, and 1280px. The sidebar should be hidden on mobile, visible as a drawer on tablet, and fixed on desktop. The card grid should go from one column on mobile to four columns on desktop." AI will produce a complete, well-structured stylesheet with comments. Your job is to adjust colors, spacing, and typography to match your brand, and to verify that the breakpoints align with your actual content, not just the standard numbers.

2. Use AI to generate srcset markup and image variants.
Creating multiple image sizes manually is tedious. If you have a source image, you can ask AI: "Generate the HTML img tag with srcset for this image at widths 480, 768, 1024, and 1280 pixels. The image is a product photo that will be full-width on mobile and one-third width on desktop." AI will produce the complete markup including the sizes attribute. For actually generating the resized image files, use tools like ImageMagick, Squoosh, or online services, but let AI write the HTML that references them correctly.

3. Debug responsive layout issues with AI.
If your layout breaks at a specific width and you cannot figure out why, paste your CSS and a description of the problem into an AI assistant: "My card grid is supposed to switch from one column to two columns at 768px, but on an iPad in portrait mode it is still showing one column. Here is my CSS." AI will check your media query syntax, verify whether you used min-width or max-width correctly, and flag common issues like missing viewport meta tags, CSS specificity conflicts, or flexbox properties that override your grid settings.

4. Generate accessibility-compliant viewport and media query patterns.
Ask AI: "Write a complete HTML5 boilerplate with the correct viewport meta tag, and a CSS file with mobile-first media queries that respect prefers-reduced-motion and support dark mode via prefers-color-scheme." AI will include modern accessibility features you might forget, like respecting user preferences for reduced animation and automatically switching color schemes based on system settings. This elevates your responsive design from functional to professional.

5. Verify AI-generated CSS in browser DevTools before trusting it.
AI can generate syntactically correct CSS that does not actually produce the layout you want. A media query might use the wrong breakpoint for your content. A flexbox property might conflict with a grid property elsewhere in your stylesheet. Always paste AI-generated CSS into your project, open DevTools, resize the viewport slowly, and verify that every breakpoint transition looks correct. Check that images load the right srcset source by opening the Network tab and filtering by Img. Confirm the viewport meta tag is present by viewing the page source. AI accelerates your workflow, but the visual verification is your responsibility.

A habit worth building from this lesson onward: start every new project with a viewport meta tag and a mobile-first breakpoint structure, even before you write any content HTML. The responsive framework is the foundation. Everything else builds on top of it. AI can generate that foundation in seconds, but you must understand why each breakpoint exists and how the cascade carries styles upward, because when a layout breaks at 3 AM before a client demo, it is your knowledge, not the AI, that fixes it.

Next lesson: CSS Flexbox and Grid for modern layout systems.