Responsive Design in React

In today’s world of multiple devices and screen sizes, having a responsive design is essential.

A responsive React app automatically adjusts its layout, fonts, and components to look great on mobile, tablet, and desktop screens — without breaking the user experience.

React makes it easy to build responsive UIs using CSS media queries, flexbox/grid layouts, responsive units, and modern tools like Tailwind CSS and React Responsive.

What is Responsive Design?

Responsive design means creating web pages that look and function properly on all devices — from smartphones to large desktop monitors.

Instead of building separate sites for each device, you create one flexible layout that adapts automatically.

Goals of Responsive Design:

• Maintain readability and usability on all devices.
• Prevent horizontal scrolling or content overflow.
• Deliver consistent user experience across different screen sizes.

1. Using CSS Media Queries in React

The most traditional and powerful way to make your React components responsive is by using CSS media queries.

Example: Responsive Layout with CSS

App.js

import "./App.css";

function App() {
  return (
    <div className="container">
      <header className="header">My Responsive App</header>
      <main className="content">This is the main content area</main>
      <footer className="footer">Footer Section</footer>
    </div>
  );
}

export default App;

App.css

.container {
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "footer";
  gap: 10px;
}

.header,
.content,
.footer {
  padding: 20px;
  background-color: #f5f5f5;
  text-align: center;
}

/* Desktop View */
@media (min-width: 768px) {
  .container {
    grid-template-areas:
      "header header"
      "content footer";
    grid-template-columns: 2fr 1fr;
  }
}

2. Using Responsive Units (%, rem, vh, vw)

Instead of fixed sizes like px, use relative units that scale dynamically.

Unit	Description
%	Relative to parent element
em / rem	Relative to font size
vh / vw	Relative to viewport height/width

Example:

.container {
  width: 90vw;
  padding: 2rem;
}

3. Responsive Design with Flexbox and Grid

React apps often rely on flexbox or CSS grid for responsive layouts.

Example with Flexbox:

<div className="flex-container">
  <div className="box">Box 1</div>
  <div className="box">Box 2</div>
  <div className="box">Box 3</div>
</div>

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 300px;
  margin: 10px;
  background: lightblue;
  padding: 20px;
  text-align: center;
}

4. Using react-responsive Library

You can also make components adapt conditionally using JavaScript, not just CSS.

Install:

npm install react-responsive

Example:

import { useMediaQuery } from "react-responsive";

function ResponsiveText() {
  const isMobile = useMediaQuery({ maxWidth: 767 });
  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 1024 });
  const isDesktop = useMediaQuery({ minWidth: 1025 });

  return (
    <div>
      {isMobile && <p>? You are on a mobile device!</p>}
      {isTablet && <p>? You are on a tablet device!</p>}
      {isDesktop && <p>?️ You are on a desktop screen!</p>}
    </div>
  );
}

export default ResponsiveText;

Why use react-responsive?

• Allows component-level control of layout behavior.
• Great for rendering different UI components per device.

5. Tailwind CSS for Responsive Design

Tailwind CSS is the fastest way to add responsiveness using utility classes.

Example:

Tailwind’s responsive classes (sm:, md:, lg:, xl:) make it effortless to design mobile-first layouts.

<div className="p-6 bg-blue-200 md:bg-green-200 lg:bg-pink-200 text-center">
  <h1 className="text-xl md:text-2xl lg:text-4xl font-bold">
    Responsive with Tailwind CSS
  </h1>
  <p className="text-sm md:text-base lg:text-lg">
    Resize the screen to see changes.
  </p>
</div>

6. Responsive Images in React

Use responsive image techniques to ensure images scale properly.

<img
  src="banner.jpg"
  alt="banner"
  style={{ width: "100%", height: "auto" }}
/>

7. Responsive Components with CSS Modules

If you’re using CSS Modules, responsiveness works the same way — just with scoped styles.

import styles from "./Layout.module.css";

function Layout() {
  return (
    <div className={styles.container}>
      <h1>Responsive Design with CSS Modules</h1>
    </div>
  );
}

Layout.module.css

CSS Modules help prevent global style conflicts in larger apps.

.container {
  padding: 20px;
}

@media (min-width: 768px) {
  .container {
    padding: 40px;
  }
}

Summary Table

Approach	Best For	Tools
CSS Media Queries	Classic, flexible layouts	Plain CSS, SCSS
React Responsive	Component-based rendering	useMediaQuery
Tailwind CSS	Utility-first responsive styling	Tailwind breakpoints
Flexbox/Grid	Adaptive, clean layout structures	CSS, Styled Components