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 |