How to Make a Webpage Responsive Using CSS

Mar 10, 2025

In today's digital era, users access websites from many devices, including desktops, tablets, and smartphones. A responsive design ensures that your website adapts seamlessly to different screen sizes, providing a smooth user experience across all devices. But, in case there are no responsive designs, users might have to deal with odd layouts, unaligned elements, and irritating navigation issues that all lead to a less-than-acceptable experience, not to mention increasing bounce rates. 

CSS offers a powerful way to make your webpage responsive without the need for separate designs for each device. By using techniques such as media queries, flexible layouts, and fluid typography, you can create a website that looks great and functions well on any screen size. Adopting responsive design principles ensures that your content is accessible and user-friendly for everyone, regardless of the device they use.

This blog covers all the ways you can make your webpage responsive by using CSS. It will start with basic understanding of responsive design, and viewport settings. This will be followed by CSS grid and flexbox. Making images responsive is also an important step towards making whole webpage responsive. Deep into the blog you will read about media queries. Media queries are one of the most important ways to making webpage responsive. At last you will read about how to make text and other components responsive. 

Understanding Responsive Web Design

Responsive Web Design (RWD) is an approach where a website’s design and development respond dynamically to the user’s screen size, orientation, and platform. This ensures consistency in usability, readability, and layout structure across all devices.

Setting the Viewport

The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. The viewport controls how a webpage is displayed on different devices. To ensure proper scaling and rendering, include the following meta tag inside the <head> section of your HTML:

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

This tag ensures that the content width matches the device width and prevents unwanted zooming issues.

Creating Flexible Layouts with CSS Grid and Flexbox

Using CSS Grid and Flexbox, you can create responsive and flexible layouts that adapt based on the screen size.

CSS Grid

CSS Grid is a powerful tool for designing two-dimensional layouts. Here’s how you can create a responsive grid:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
}
.item {
    background-color: lightgray;
    padding: 20px;
    text-align: center;
}

Example HTML:

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

Flexbox

Flexbox is great for one-dimensional layouts like navigation bars and lists. Here’s how you can make a responsive navigation bar:

.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #333;
    padding: 10px;
}
.nav-item {
    color: white;
    padding: 10px;
    text-decoration: none;
}
.nav-item:hover {
    background-color: #575757;
}

Example HTML:

<div class="navbar">
    <a href="#" class="nav-item">Home</a>
    <a href="#" class="nav-item">About</a>
    <a href="#" class="nav-item">Services</a>
    <a href="#" class="nav-item">Contact</a>
</div>

Making Images Responsive

To ensure images resize appropriately across different devices, use the following CSS:

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

Example HTML:

<img src="example.jpg" alt="Responsive image">
For serving different images based on screen sizes, use the <picture> element:
<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-large.jpg" media="(min-width: 601px)">
  <img src="image-default.jpg" alt="Responsive image">
</picture>

Using Media Queries

Media queries allow you to apply specific styles based on screen size. Here’s an example:

/* Default styles */
.container {
    display: flex;
    flex-direction: row;
}
/* Styles for screens smaller than 600px */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

Example HTML:

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
</div>

Fluid Typography

Using relative font sizes instead of fixed sizes improves readability. Here’s how:

body {
    font-size: 2vw; /* Adjusts based on viewport width */
}
Another method is using clamp() for more control:
body {
    font-size: clamp(16px, 2vw, 24px);
}

This ensures the font size stays within a specified range, adapting to different screen sizes smoothly.

Responsive Buttons

Buttons should also be responsive to enhance the user experience. Here’s an example:

.button {
    padding: 10px 20px;
    font-size: 1rem;
    border: none;
    background-color: blue;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: darkblue;
}
@media (max-width: 600px) {
    .button {
        width: 100%;
        font-size: 1.2rem;
    }
}

Example HTML:

<button class="button">Click Me</button>

Conclusion

Making a webpage responsive with CSS is crucial in today’s mobile-driven world. A responsive design enhances user engagement, reduces bounce rates, and ensures accessibility for a wider audience. By applying techniques such as flexible layouts, fluid typography, and media queries, you can create a seamless experience across different devices.

Superflex.ai simplifies coding with an AI-powered Figma to React workflow. It integrates smoothly with VS Code, allowing for more elegant and quicker code with less work.

Be Ready to Change the Way You Work? Go to Superflex.ai and reinvent how you create front-end applications.

Solution

Pricing

Blog

VSCode Extension