Infoplanet
    Enquire Now
    Staff LoginStudent Login

    Responsive Web Design Basics

    Atul Kabra3 min readUpdated

    Responsive web design is the practice of building one website that adapts to any screen — phone, tablet, laptop, or large monitor — instead of building separate sites. The same HTML rearranges and resizes itself so the page is comfortable to read and use everywhere. With most web traffic now coming from phones, this is not optional; it is the baseline expectation.

    Start with the viewport meta tag

    Before any responsive CSS works, you must tell mobile browsers to use the device's real width. This one line in your <head> is non-negotiable:

    <!-- Tells the browser: use the device's width, don't zoom out to fake a desktop -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

    Without it, phones render the page as if on a wide desktop and shrink it to fit, leaving tiny, unreadable text.

    Use relative units, not fixed pixels

    Fixed widths like width: 960px break the moment a screen is narrower. Responsive design leans on relative units that flex with their context:

    .container {
  width: 90%;          /* a share of the parent, not a fixed size */
  max-width: 1200px;   /* but never wider than this on big screens */
  margin: 0 auto;      /* centre it */
}

img {
  max-width: 100%;     /* images never overflow their container */
  height: auto;        /* keep the aspect ratio */
}

    That max-width: 100% on images is a small line that prevents a very common layout break.

    Media queries: changing rules by screen size

    A media query applies CSS only when a condition is met — usually a minimum screen width. This is how layouts shift between phone and desktop:

    /* Mobile-first: these are the default, small-screen styles */
.cards {
  display: grid;
  grid-template-columns: 1fr;   /* one column on phones */
  gap: 16px;
}

/* When the screen is at least 768px wide, switch to two columns */
@media (min-width: 768px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* On wider screens still, go to three columns */
@media (min-width: 1024px) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

    Want to learn this properly?

    Join the waitlist for our courses — beginner-friendly, project-first classes in Jalgaon.

    Browse courses

    Mobile-first thinking

    Notice the order above: we wrote the mobile layout first, then added complexity for larger screens with min-width queries. This mobile-first approach is the recommended way to work. It keeps the simplest, most universal styles as the default and layers on enhancements, rather than starting big and stripping things away.

    Modern CSS layout tools make much of this easier — CSS Grid with auto-fit and minmax, and Flexbox with flex-wrap, can reflow content with little or no media-query work.

    Common mistakes

    • Forgetting the viewport meta tag. Everything else can be perfect and the site will still look broken on phones without it.
    • Designing desktop-first. Starting with a wide layout and shrinking it usually produces a cramped, awkward mobile experience. Start small.
    • Using fixed pixel widths for containers. Percentages, max-width, and grid units adapt; fixed pixels do not.
    • Letting images overflow. Always pair images with max-width: 100%.
    • Picking breakpoints to match specific devices. Choose breakpoints where your content starts to look bad, not based on the latest phone's exact width.

    FAQ

    How many breakpoints do I need? There is no fixed number. Add a breakpoint wherever the layout begins to feel cramped or stretched. Two or three are common for a simple site.

    Is responsive design the same as mobile-first? Closely related but not identical. Responsive design is the goal (one site, all screens); mobile-first is a recommended strategy for getting there.

    Keep learning

    Want to build for the web? Explore our courses in Jalgaon.

    Want to learn this properly?

    Join the waitlist for our courses — beginner-friendly, project-first classes in Jalgaon.

    Browse courses
    Atul Kabra

    Founder, Infoplanet

    Atul Kabra founded Infoplanet in 2001 and has spent over two decades teaching programming — C, C++, Java, databases and more — to students across Maharashtra.

    Related guides