Ever opened a website on your phone and the menu just... isnt there? Or the text is so small you have to zoom in to read it? Thats what happens when a site is built only for desktop and mobile gets ignored until the end. We see this all the time and it's avoidable if you build responsive from the very first line of code.
At VartexSoft, a Software House in Bahawalpur, responsive design isn't an afterthought — it's how every project starts. This guide walks through exactly how we approach Web Development in Bahawalpur, with real code you can copy, paste and adapt for your own project, whether it's a personal portfolio or a full business site.
You don't need a framework or a page builder to follow along. Just plain HTML, CSS and a little JavaScript — the same fundamentals every developer should understand before reaching for Bootstrap or Tailwind.
START WITH THE VIEWPORT META TAG
This single line in your HTML <head> is the difference between a page
that scales correctly on mobile and one that loads zoomed out like a desktop site squeezed
onto a phone screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Without it, every media query you write later will simply be ignored by mobile browsers. We add this before writing a single line of CSS on every project.
RESET DEFAULTS AND USE A FLUID CONTAINER
Browsers apply their own default margins and box-sizing rules, which cause inconsistent spacing across devices. Start every project with a small reset and a container that uses percentage width instead of a fixed pixel value.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
That max-width: 100% rule on images alone fixes one of the most common bugs we
see — pictures breaking out of their containers on small screens.
BUILD THE NAVBAR WITH FLEXBOX
A navigation bar is the simplest place to start with Flexbox — one axis, a few items, evenly spaced. Here's the structure we use as a base before adding a mobile hamburger toggle.
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 5%;
background: #101120;
}
.nav-links {
display: flex;
gap: 28px;
list-style: none;
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hamburger {
display: block;
}
}USE CSS GRID FOR SELF-ADJUSTING LAYOUTS
For sections like service cards or a portfolio grid, auto-fit with
minmax() removes the need for separate media queries for every breakpoint —
the browser calculates how many columns fit on its own.
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}On a wide screen this might show four columns. On a phone, it automatically drops to one — no extra code required.
WRITE MEDIA QUERIES THAT MATCH REAL DEVICES
You don't need a media query for every possible screen width. These three breakpoints cover the vast majority of real-world traffic we see across our clients' analytics.
/* Tablet */
@media (max-width: 1024px) {
.hero h1 { font-size: 2.2rem; }
}
/* Mobile */
@media (max-width: 768px) {
.hero h1 { font-size: 1.8rem; }
.footer-grid { grid-template-columns: 1fr; }
}
/* Small mobile */
@media (max-width: 480px) {
body { font-size: 14px; }
}ADD A WORKING MOBILE MENU WITH JAVASCRIPT
CSS handles the layout, but the hamburger toggle itself needs a small script. Keep it simple — toggle a class, close the menu when a link is clicked.
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', () => {
navLinks.classList.toggle('open');
});
navLinks.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('open');
});
});OPTIMIZE EVERY IMAGE BEFORE IT GOES LIVE
Unoptimized images are the number one reason responsive sites still load slowly on mobile.
Compress everything before upload, use srcset to serve smaller files to smaller
screens, and add loading="lazy" to anything below the fold. We cover this in
more depth in our page speed section of the
SEO
tips article.
TEST ON REAL DEVICES, NOT JUST DEVTOOLS
Chrome DevTools' device mode (Ctrl+Shift+M) is a good first check, but it's a simulation. Before any project ships, we test on actual Android and iOS devices — touch targets that look fine in DevTools sometimes feel too small with a real thumb.
DEPLOY YOUR RESPONSIVE WEBSITE AND TEST MOBILE FRIENDLINESS
Once your site is live, run it through Google's Mobile-Friendly Test and check Core Web Vitals in Search Console. A responsive site that also loads fast is what actually helps rankings — not just having media queries in your CSS.
A responsive website is only half the picture once its live, you'll also want it to actually rank on Google. Our SEO tips guide covers exactly how to do that. And if WordPress is more your speed than hand-coding, check out our WordPress development service instead.
Thats the full process viewport tag, fluid layout, Flexbox and Grid, sensible breakpoints, a working mobile menu, optimized images, and real device testing. If you'd rather learn this hands-on with real projects, our Web Development course in Bahawalpur covers all of this step by step, or our team can build your responsive website for you.
Frequently Asked Questions
No. A fully responsive layout can be built using only HTML and CSS with media queries, Flexbox and Grid. JavaScript is only needed for interactive elements like a mobile menu or smooth scrolling.
Flexbox is best for arranging items in a single row or column, like a navbar or a row of cards. CSS Grid is better for two-dimensional layouts where you need control over both rows and columns at the same time, like a full page layout.
A simple one-page responsive website can be built in one to three days by a beginner. A complete multi-page business website usually takes one to three weeks depending on design complexity and features.
Yes. Google uses mobile-first indexing, which means it primarily evaluates the mobile version of a site for ranking. A responsive, fast-loading website performs significantly better in search results than a non-responsive one.
VartexSoft is a software house in Bahawalpur offering custom Website Development, SEO, Web Design and Digital Marketing services. We build fast, fully responsive websites using modern technologies and provide ongoing support after launch.
Written by Areeb Sarwar
Areeb Sarwar is the founder and CEO of VartexSoft, a Software House in Bahawalpur. He works with businesses on Website Development, SEO, Web Design, and Digital Marketing strategies to improve their online visibility.
WANT A PROFESSIONAL RESPONSIVE WEBSITE?
Learn HTML, CSS, JavaScript and responsive design hands-on with VartexSoft's Web Development Course in Bahawalpur — or let our team build it for you.
View Web Development Course