How to Build Fully Responsive Websites Using Only CSS?

Chirag Mittal
Oct 8
4 min read

Imagine this, you land on a website from your phone. Instead of neatly fitting your screen, the text is tiny, buttons are impossible to tap, and you’re forced to pinch-zoom just to read. Chances are, you’ll leave in seconds. That’s exactly what happens to millions of users every day.

To ensure your site delivers a smooth, user-friendly experience across all devices and attracts significant traffic, it is essential to use responsive design.

Frameworks like Bootstrap and Tailwind can speed up development but also add complexity. They come with pre-styled components and breakpoints but often force you into rigid patterns.

With just semantic HTML + pure CSS, you gain:

Lightweight performance (no extra bloat).
Full design flexibility.
A deeper understanding of how responsiveness truly works.

Walkthrough: Building a Responsive Website with Only CSS

Step 1: Laying the Groundwork – Viewport & Mobile-First Thinking

Every responsive design begins with:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser how to scale content. Without it, your site may appear zoomed out on mobile.

Why mobile-first matters:

Prevents building complex desktop layouts that break when simplified for smaller screens.
Mobile users often face slower connections, starting lean ensures faster loading.
Touch-first design guarantees usability where it matters most.

Step 2: Core Layout (Mobile → Tablet → Desktop)

We’ll evolve one layout instead of jumping between random snippets. A smart approach is to start with the simplest small screens layout (mobiles) and then progressively adapt for larger ones.

Mobile-First Base

body {
  margin: 0;
  font-family: sans-serif;
}
 
header, footer {
  padding: 1rem;
  text-align: center;
  background: #4a90e2;
  color: white;
}
 
.nav {  display: flex;  flex-direction: column; /* stacked menu */}
.nav a {
  padding: 10px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #ddd;
}
.grid {  display: grid;  grid-template-columns: 1fr;  gap: 20px;}

Tablet (~768px and up)

@media (min-width: 768px) {
  .nav { flex-direction: row; justify-content: center; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

Desktop (~1024px and up)

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

Step 3: Essential Extras (Accessibility & Usability)

The below mentioned pointers make your design usable and inclusive in real-world scenarios.

Dark Mode

Reduces eye strain at night.
Saves battery on OLED screens.
Aligns with user preference trends.

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #e0e0e0; }
  .nav { background: #232526; }
}

Hover vs. Touch Inputs

Hover states don’t exist on touchscreens.
Prevents menus or tooltips from breaking on mobile.
Improves accessibility and usability across input types.

@media (hover: hover) and (pointer: fine) {
  .card:hover .tooltip { opacity: 1; }
}

Reduced Motion for Accessibility

Some users experience motion sickness or discomfort from animations.
Respecting OS-level settings means a more accessible UX.
Avoids excluding users with disabilities.

@media (prefers-reduced-motion: reduce) {
  .carousel { animation: none; transition: none; }
}

Step 4: Advanced Scenarios

Once your basics are solid, you can add support for cutting-edge devices and contexts.

Foldable Devices

Foldables are a growing category of devices.
Allows layouts to span across panes naturally.
Prepares your design for future-proofing.

@media (spanning: single-fold-vertical) {
  .grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

Browser support: Chromium/Edge only. No Safari/Firefox support.

Container Queries

Lets components adapt to their parent container, not just the viewport.
Improves reusability of UI components.
Crucial for modular and scalable design systems.

.card { container-type: inline-size; }
@container (min-width: 420px) {
  .card { grid-template-columns: 1fr 120px; }
}

Browser support: modern browsers (2022+). Older browsers ignore this.

Safe Areas (iPhone Notch, etc.)

Prevents content from being cut off by notches, rounded corners, or camera holes.
Ensures a polished look on iPhones and Android flagships.

.header { padding: env(safe-area-inset-top) 1rem; }

Browser support: iOS Safari + some Android browsers. Ignored on desktop.

High-DPI Images

Ensures crisp icons on Retina / high-DPI displays.
Prevents blurry logos/borders.
Enhances professional look of your site.

.icon {
  background-image: -webkit-image-set(
    url("icon-1x.png") 1x,
    url("icon-2x.png") 2x );
}

Note: Requires -webkit- prefix for older browsers.

Print Styles

Many users still print pages (invoices, articles, tickets).
Hides irrelevant content like ads/nav bars.
Improves legibility on paper.

@media print {
  nav, .ads { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}

Note: Supported in all major browsers.

Step 5: Making Content Truly Flexible

A responsive layout isn’t only about grids. Typography, images, and backgrounds need to be adapted too across different devices.

Typography with clamp(): A heading that looks good on a phone may look tiny on a desktop. Using clamp(), you can set a min, preferred, and max size:

h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

Responsive Images: To avoid inappropriate cropping or distortion, make them scale naturally:

img { max-width: 100%; height: auto; }

Backgrounds that scale naturally: Hero sections often look broken if not scaled properly. Use:

.hero { background: url('banner.jpg') center/cover; }

Step 6: Test Across Devices

Before pushing your website to production, make sure to check for common mistakes and thoroughly test across devices:

Try your site on actual phones, tablets, and laptops
Use browser dev tools to simulate various breakpoints
Print pages to check readability
Switch between light and dark mode

Demo sample for reference-

Think of this as your final checkpoint, iterating through these steps will refine your CSS and make responsiveness second nature.

Building fully responsive websites with only CSS isn’t about avoiding frameworks, it’s about mastering the fundamentals. With flexbox, grid, media queries, and fluid units, you can create designs that feel natural across all devices.

The best way to learn? Start small. Build one page, test it across devices, then refine. Every time you practice, CSS responsiveness will feel less like magic and more like second nature.

So next time you hear that you “need Bootstrap” to go responsive, remember all you really need is CSS and a bit of creativity.