Responsive Design

Responsive design means your website adjusts and looks good on all screen sizes, from large desktops to small phones. Instead of making different versions for each device, you build one website that automatically adapts to any screen.

Here’s how you can do that using:

Media Queries

CSS Media Queries are used to apply different styles on different devices based on screen width, height, device orientation, resolution, etc. Using media queries, you can create web designs that respond perfectly to the user’s device and enhance the user experience.

The Basic Syntax of Media Queries:

@media media-type and (media-expression) {
  /* CSS styles go here */
}

Here,

• @media: This represents the beginning of a media query.

• media-type: This tells the browser that for what kind of media this code is. You can use the following values for this:

  • all – for all media-type devices.
  • print – for printers.
  • screen – for desktop screens, laptops, tablets, mobile phones etc.
  • speech – for screenreaders who read the page out loud.

• media-expression: This is a rule that has to be passed for the CSS to be applied.

For example, when specifying the screen width as 600px in the expression, the associated CSS styles will take effect exclusively when the screen size matches this width; otherwise, they will remain inactive.

• { /* CSS styles go here */ }: Here, the CSS styles will be written that you want to apply to the given media-type and media-expression.

Let’s take an example to understand this more clearly.

@media screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}
 

Here, media-type is screen, and media-expression is max-width: 600px, which means this will change the background color of the body when the width of the screen is 600px or less than 600px (because here the maximum width is 600px).

The provided media expression is also called the breakpoint. So here, 600px is the breakpoint.

Now, you might be thinking about what values you can give to media-expression.🤔

Let me tell you the most common values for media-expression.

• width and height of the device
• orientation (for example, tablet/mobile phone is in landscape or portrait mode)
• resolution
• ranged syntax

Let’s see some examples to understand each of the above values.

Examples

The width and height of the device

@media screen and (max-width: 675px) {
  body {
    background-color: red;
    color: white;
  }
}

In this example, when the screen size is 675px or less than 675px, the background color and the color of the body will be changed.

Device Orientation

You can give orientation as landscape or portrait.

/* Styles for landscape orientation */
 
@media screen and (orientation: landscape) {
  body {
    background-color: red;
    color: white;
  }
}

Resolution

You can also target devices based on their resolution.

/* Styles for high-resolution displays */
 
@media screen and (min-resolution: 300dpi) {
  body {
    background-color: red;
    color: white;
  }
}

Ranged syntax

@media (min-width: 375px) and (max-width: 758px) {
   body {
    background-color: red;
    color: white;
  }
}

In this example, when the screen size is between 375px and 758px, the background color and the color of the body will be changed.

By using media queries, you can set different CSS styles for different devices.

Common Breakpoints

Now, after learning about media queries, you may have a question “How do I know about the breakpoints of the screens?”🤔

So here are some commonly used breakpoints for the devices:

Traditional Syntax (Older but Still Common)

This uses min-width and max-width with the and keyword:

/* Extra large screens */
 
@media (min-width: 1920px){
  /* CSS styles go here */
}
 
/* Desktops */
 
@media (min-width: 1200px) and (max-width: 1919px){
  /* CSS styles go here */
}
 
/* Laptops/Large tablets */
 
@media (min-width: 992px) and (max-width: 1199px){
  /* CSS styles go here */
}
 
/* Small tablets */
 
@media (min-width: 768px) and (max-width: 991px){
  /* CSS styles go here */
}
 
/* Extra small devices */
 
@media (min-width: 481px) and (max-width: 767px){
  /* CSS styles go here */
}
 
/* Mobile */
 
@media (max-width: 480px){
  /* CSS styles go here */
}

Modern Syntax (Range Media Queries)

The range syntax uses comparison operators (>=, <, <=) for defining media query conditions.

It's supported in most modern browsers as of late 2023, but for backward compatibility, check support or use traditional syntax alongside this if needed.

/* Extra large screens */
@media (width >= 1920px) {
  /* CSS styles go here */
}
 
/* Desktops */
@media (1200px <= width <= 1919px) {
  /* CSS styles go here */
}
 
/* Laptops/Large tablets */
@media (992px <= width <= 1199px) {
  /* CSS styles go here */
}
 
/* Small tablets */
@media (768px <= width <= 991px) {
  /* CSS styles go here */
}
 
/* Extra small devices */
@media (481px <= width <= 767px) {
  /* CSS styles go here */
}
 
/* Mobile */
@media (width <= 480px) {
  /* CSS styles go here */
}

Standard breakpoints are not explicitly defined, but you can use these commonly used ones to make your websites responsive.

Container Queries

Container queries are a new CSS feature that you can use to change the styles of an element based on the size of its parent container, not the entire screen.

You can think of them as media queries for components.

But we already have media queries, then why do we need Container Queries?

Imagine you have a card inside a sidebar. On a big screen, the sidebar is 300px wide, but on a small screen, it gets smaller, only 150px wide.

With media queries, you can only change styles based on the whole screen's size, not the size of the sidebar or card.

This causes problems when:

• Your components (like cards) are used in different places on the page
• You want your components to be flexible and work well anywhere

Container queries solve this by checking the size of the component’s container, not just the screen.

How to Use Container Queries

• Choose the container: This could be a card wrapper, sidebar, section, etc.
• Tell the browser to track its size:

.container {
  container-type: inline-size;
}

• inline-size means: track width (not height).
• Write container-specific styles:

@container (min-width: 600px) {
  .child {
    font-size: 1.2rem;
    grid-template-columns: 2fr 1fr;
  }
}

Values of container-type

1. normal (default)

The element won’t be treated as a container for container queries. Container queries won’t work unless you change this to something else.

.container {
  container-type: normal;
}

2. inline-size

Enables container queries based on the container’s width (the inline axis). Most common and recommended for responsive layouts.

.container {
  container-type: inline-size;
}

3. size

Enables queries based on both width and height. It's useful if you care about height (rare case), but not widely supported yet.

.container {
  container-type: size;
}

Example

Imagine a card that:

• Shows content vertically when the screen is narrow
• Shows content side by side when the screen is wide

<div class="card-container">
  <div class="card">
    <img src="..." />
    <div class="content">...</div>
  </div>
</div>

CSS:

/* Tell the browser to watch the container’s width */
 
.card-container {
  container-type: inline-size; /* tells browser to track width */
}
 
/* Step 2:  When container is at least 400px wide, arrange content side-by-side */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

This means:

• When .card-container is less than 400px wide, the card content stacks vertically (one on top of another).
• When .card-container is 400px or wider, the card content shows side by side (horizontally).

This way, the card adapts its layout based on its own size, not the whole screen.

Browser Support

Container queries are now supported in most modern browsers, including Chrome, Edge, Firefox, and Safari.

But always check Can I Use if you're targeting older browsers.

Viewport Units

Before learning about viewport units, you should know what a viewport is.

The viewport is the visible part of a webpage in your browser. It’s the area where content is shown, everything you see without scrolling.

• On a phone, the viewport is small.
• On a desktop, the viewport is larger.
• As you resize the window, the viewport changes.

Now, what are viewport units?

Viewport units are CSS units that are based on the size of the viewport, not a fixed pixel value. This makes them perfect for building responsive layouts that adjust automatically to any screen size.

Here are the most common viewport units:

Why Use Viewport Units?

Viewport units help you make things that:

• Fill the entire screen
• Stay proportional on any device
• Adapt without media queries

Example 1

.hero {
  width: 100vw;   /* full width of the screen */
  height: 100vh;  /* full height of the screen */
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

Here, this will create a full-screen section. This is great for landing pages or welcome banners.

Example 2

h1 {
  font-size: 5vw; /* Text grows/shrinks based on screen width */
}

On a large screen, the text will be big. On a smaller screen, it will shrink automatically.

Example 3

.square {
  width: 50vmin;
  height: 50vmin;
  background-color: teal;
}

This will create a square that always fits nicely, even if the screen is tall or wide, because it uses the smaller of vw or vh.

Problem with Viewport Units

On mobile devices, some browsers hide or show the address bar as you scroll. This can cause the viewport height (vh) to change unexpectedly.

To fix this, use modern units:

• svh – Smallest viewport height
• lvh – Largest viewport height
• dvh – Dynamic viewport height

Example:

height: 100svh;

These give better control, but not all browsers support them yet.

Responsive Images

When you're building a website, images need to look good on all screen sizes, phones, tablets, laptops, etc.

But if you're not careful, images might:

• Look stretched or squished
• Get cut off in weird ways
• Take too long to load (especially on mobile)

To make sure images look great and load efficiently on all devices, you can use:

• object-fit in CSS
• srcset in HTML

object-fit

Use this when you want an image to fit inside a box nicely.

Imagine a container that’s 300px tall and full-width. You add an image inside it:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

What this does:

• The image stretches across the full width
• It stays 300px tall
• If the image doesn’t fit perfectly, object-fit: cover will crop it instead of squishing it

This is great for banners or profile pictures that should fill the space without distortion.

Learn more about object-fit

srcset

Use this when you want the browser to pick the best image depending on the user’s device.

Why?

Because a huge image looks nice on a big screen, but is wasted data on a small phone.

Example:

<img 
  src="small.jpg" 
  srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1024w" 
  sizes="(max-width: 768px) 100vw, 50vw" 
  alt="Example" 
/>

What this means:

• src is the default image
• srcset gives the browser multiple options
  • small.jpg 480w = use when screen is small
  • medium.jpg 768w = use for medium screens
  • large.jpg 1024w = use for big screens
• sizes tells the browser how wide the image will appear:
  • 100vw = full width on small screens
  • 50vw = half width on larger screens

Why is this helpful?

• Mobile users get smaller, faster images
• Desktop users get high-quality images
• Your site loads faster and looks better

Aspect Ratio

Aspect ratio means the shape of a box, how wide it is compared to how tall it is. It is the relationship between the width and height of an element.

You’ll use it a lot for things like:

• Images
• Videos
• Cards
• Thumbnails
• Iframes
• Embedded YouTube videos

Why It’s Useful

It helps you maintain a consistent shape no matter how large or small the element becomes on different screen sizes.

How Does It Work?

You define it as a width : height ratio using the aspect-ratio property.

.box {
  aspect-ratio: 16 / 9;
}

This means that for every 16 parts of width, the height will be 9 parts.

The box might grow or shrink, but its shape stays the same.

So, whether the box is 1600px wide or just 160px, it will always keep the same shape, like a widescreen video.

Common Aspect Ratios

Example:

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: black;
}

This gives you a full-width video box that automatically keeps a 16:9 shape, even when resizing the screen.

Use with iframe or video

For responsive embeds (like YouTube videos):

<div class="video-container">
  <iframe 
    src="https://www.youtube.com/embed/example"
    allowfullscreen>
  </iframe>
</div>

CSS:

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
 
.video-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

This way:

• The container keeps a 16:9 shape.
• The iframe stretches to fill that space.
• It works beautifully on all devices.

Aspect Ratio with Images

Sometimes you want an image to fit in a specific shape, like a square thumbnail.

.thumbnail {
  aspect-ratio: 1 / 1;
  width: 150px;
  object-fit: cover;
}

• aspect-ratio: 1 / 1 makes it a square.
• object-fit: cover ensures the image fills the space and crops if necessary, without stretching.

Benefits of Using aspect-ratio

Browser Support

• Widely supported in modern browsers (Chrome, Firefox, Safari, Edge).

• For older browsers, you may need fallback techniques (like padding-based hacks).