Clean • Professional
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.
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.
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;
}
}
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;
}
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;
}
react-responsive LibraryYou 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?
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>
Use responsive image techniques to ensure images scale properly.
<img
src="banner.jpg"
alt="banner"
style={{ width: "100%", height: "auto" }}
/>
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;
}
}
| 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 |