Is Your Website Responsive? How to Actually Check

If your site looks fine on your laptop but the “Buy” button slides off the screen on your customer’s phone, it is not responsive. You can check this in 10 minutes with three tools: browser DevTools, a real phone, and a tablet. Here is the step-by-step.

What Responsive Means (and What It Does Not)

A responsive site adapts to the screen width. Text reflows cleanly, buttons stay tappable, images do not crop awkwardly, and menus work for both finger and mouse.

What is NOT responsive:

• A “mobile-friendly” site that is actually a separate old mobile version.
• A site that shows the desktop layout shrunken down on phone, forcing you to zoom to read.
• A site where text shows but forms cannot be filled because fields fall off-screen.
• A site that loads fast on fiber but takes 15 seconds on mobile data.

Over 60% of web traffic in Costa Rica comes from phones. If your site breaks on mobile, you are slamming the door on most of your customers.

The 5 Widths That Matter

The internet has thousands of screen sizes. In practice, five matter:

• 360-390px: standard phones (Samsung Galaxy A-series, iPhone SE, iPhone 12/13 mini). In Costa Rica, Samsung A devices dominate by price.
• 414-430px: large phones (iPhone Pro Max, Galaxy S Ultra).
• 768px: tablets in portrait (standard iPad).
• 1024px: tablets in landscape and small laptops.
• 1280-1440px: laptops and normal monitors.

Do you need to test on 4K or ultrawide screens? No. Test the five widths above and you cover 95% of your real users.

How to Test in DevTools (5 Minutes)

DevTools is the inspector built into every browser. You do not need to know code.

1. Open your site in Chrome, Edge, or Firefox.
2. Right-click → “Inspect.” Or press F12.
3. Find the phone/tablet icon in the top bar of the panel that opens (in Chrome it is called “Toggle device toolbar”). Or use Ctrl+Shift+M.
4. Above the site, you will see a menu with sizes. Try: iPhone SE, iPhone 12 Pro, iPad, iPad Pro.
5. If your site looks bad in any of them, note it.

Look specifically at:

• Does the menu work on phone (hamburger that opens)?
• Are buttons visible without zooming?
• Do images fill the width without stretching ugly?
• Is there horizontal scroll (a bad sign)?
• Can forms be filled without the keyboard breaking layout?

DevTools simulates pretty well. It is not perfect, but it is the first filter.

Test on a Real Phone (3 Minutes)

DevTools lies a little. Test on a real phone, ideally not your own. Borrow a phone from someone with a Samsung A or a base iPhone (not the latest Pro Max).

Open your site. Check:

• Did it load in under 3 seconds? Anything longer and you lost 40% of visitors.
• Could you complete the main action (purchase, fill form, tap WhatsApp) without a fight?
• Is text readable without squinting?
• Do links register on tap? If you have to zoom to hit a button, it is broken.

This is the most honest test. What you see on your Mac Studio is not what your customer sees on a bus to Heredia.

Test on Tablet (2 Minutes)

A lot of people forget tablets. In Costa Rica it is not the primary device, but 5-10% of your visits come from there. Try iPad or Android tablet:

• Portrait: does the layout look weird, with huge empty gaps?
• Landscape: does it look like desktop or like stretched mobile?
• Do videos play smoothly?

If you do not have a tablet, DevTools covers this case acceptably.

BrowserStack for Serious Testing

If your site is commercial and serious (ecommerce, SaaS, web app), you cannot test only on what is in the office. BrowserStack and LambdaTest let you test on hundreds of real devices remotely. Pricing starts around $30/month.

For a small site you do not need it. For something that moves money, you do.

Common Errors We Find

After auditing hundreds of sites in Costa Rica, this shows up 9 times out of 10:

• Text too small on phone: body text should be 16px minimum. At 12 or 14, it is unreadable.
• Buttons that do not register: tappable area should be 44x44px (Apple) or 48x48px (Google) minimum.
• Images breaking layout: fixed px width instead of percentages produces horizontal scroll.
• Menus that do not open: the hamburger that does not respond to taps. Happens often.
• Forms with cut-off fields when the keyboard opens.
• Popups impossible to close: the X is off-screen or 8px wide.
• Awful speed: 5MB of unoptimized images.

When to Redesign vs. Patch

If your site fails on 2-3 points of the list, those are patches. A competent developer fixes them in a few hours.

If it fails on 6+ points, or the code was built on an old template (typically WordPress with a 2017 theme that never got updated), a redesign usually costs less than patching every bug.

How do you know? Ask for an audit. If the dev says “fix this in an afternoon,” patch. If they say “we should migrate the theme and rewrite half the HTML,” redesign.

For more context on building a site right from the start, see our piece on what modern web development looks like. And for the foundation, what web development is.

Free Audit

If you want us to run the full audit (responsive, speed, technical SEO, accessibility) and tell you exactly what to fix before it costs you sales, send a message through the contact form. You get a PDF with findings in 5 business days. No commitment.