This guide walks through the twelve most common mobile responsiveness bugs we see on German SME and Mittelstand websites in 2026, how to diagnose them with free tools, and the specific fixes that work — including the BFSG accessibility considerations that have now become mandatory for many German shops.
Mobile-first indexing has been Google’s default since 2019, but in 2026 the implications have sharpened. Google’s Core Web Vitals are now measured almost exclusively from real-world mobile device data via the Chrome User Experience Report (CrUX). A site that scores 95 on desktop and 45 on mobile is, in ranking terms, a 45-score site. Sites that fail the mobile Core Web Vitals thresholds are deprioritised in organic search, dropped from AI Overview eligibility, and excluded from Discover.
Beyond search, German consumer behaviour has moved decisively to mobile. By 2026, roughly 65–75% of all DACH e-commerce traffic and 55–65% of B2B research traffic happens on smartphones. Mittelstand brands that built their websites in the desktop era and treated mobile as an afterthought are losing measurable revenue every day to competitors who built mobile-first.
We covered the broader speed and Core Web Vitals dimension in our slow WordPress fix guide for Germany; this guide is the responsiveness-and-layout half of the same problem.
How do you diagnose mobile problems in 20 minutes?
Three free tools, in this order, catch roughly 90% of the mobile bugs that hurt conversion.
Google Mobile-Friendly Test and Search Console Mobile Usability
Paste your URL into Google’s Mobile-Friendly Test (now embedded inside Search Console as the Mobile Usability report). It runs Google’s own crawler on a simulated mobile viewport and flags hard failures: text too small to read, clickable elements too close together, content wider than the screen, viewport not configured. Anything Google flags here is also hurting your ranking, so fix these first.
Chrome DevTools device emulation
Open your site on a desktop browser, hit F12 (or Cmd+Option+I on Mac), and click the Device Toggle icon. Switch through a few real device profiles — iPhone 15, Galaxy S23, iPad Mini. Watch how the layout reflows. Try every important user journey: the menu, contact form, product page, checkout. The bugs that survive Google’s automated test usually surface here.
BrowserStack or LambdaTest for real device testing
For sites where mobile traffic is critical — e-commerce, lead-gen B2B with mobile ads — emulation is not enough. BrowserStack lets you load your site on real iOS and Android devices remotely. Test the actual purchase or contact flow on three different real devices before declaring a site mobile-fixed. Most surprises hide here: WebKit-specific input quirks, Samsung browser autofill behaviour, iOS keyboard pushing the layout up.
What are the top 12 mobile responsiveness bugs to fix?
These are ordered roughly by how often we encounter them in audits and how badly each one hurts conversion or ranking.
Why are tap targets too small or too close together?
Google’s mobile usability guidelines require touch targets to be at least 48×48 CSS pixels with adequate spacing. The most common culprits: text links in tight paragraphs, social icons crammed into a footer row, navigation menus with 16px font, and “checkbox + label” patterns where only the tiny box is clickable. The fix is a global CSS audit of clickable elements and a minimum size enforcement. In CSS terms, this is usually min-height: 48px; padding: 12px; min-width: 48px on buttons, links, and form controls.
Why is there horizontal scroll on mobile?
A page that scrolls sideways on a phone is almost always caused by one element exceeding viewport width — a fixed-width container, an oversized image, a table that has not been responsive, or a position: absolute element with off-screen coordinates. Open DevTools, set the viewport to 375px wide, and add * { outline: 1px solid red; } to the CSS. The offending element becomes obvious. Fix it with max-width: 100%; overflow-x: hidden at the container level and width: 100%; height: auto on images.
Why is the hamburger menu hiding important navigation?
The hamburger pattern is fine for deep navigation but disastrous when your primary call-to-action — “Get a Quote”, “Book a Demo”, “Contact” — is buried inside it. On mobile, the top-most strip of pixels is the most valuable real estate on your site. Keep a single, persistent CTA button visible in the mobile header at all times; let the hamburger handle the rest.
Why are images loading at desktop resolution on mobile?
Images served at 2000px on a 375px viewport waste bandwidth, slow LCP, and burn the user’s data plan. The fix is two-fold: serve responsive images via the HTML srcset attribute so the browser fetches the right size, and convert to modern formats — WebP at minimum, AVIF if your audience skews newer devices. Modern WordPress themes and Shopify themes do this by default in 2026; older custom builds rarely do.
Why do forms break on mobile?
Form bugs are conversion-killers because they happen at the point of revenue. Common failures: input fields that zoom the viewport when tapped (fix: set font-size: 16px on inputs — iOS will not zoom anything 16px or larger), labels that overlap the field placeholder, autocomplete that does not trigger because the autocomplete attribute is missing, and submit buttons that disappear behind the on-screen keyboard. Test every form on a real phone with a real thumb before declaring it done.
Speed feels like a desktop problem; on mobile it is a layout problem. The biggest mobile-specific drains are render-blocking JavaScript bundles, unused CSS shipped from a desktop-first theme, third-party tracking scripts, and embedded YouTube videos that pull megabytes of player code. The fix is to audit with PageSpeed Insights mobile view, defer non-critical scripts, lazy-load below-the-fold images and iframes, and use loading="lazy" for everything that is not above the fold.
Why does my menu break on iOS Safari but work in Chrome?
iOS Safari is the most-violated browser on the modern web. WebKit handles fixed positioning, scroll behaviour, and date inputs differently from Chrome. The most common iOS-specific bugs: 100vh measuring including the address bar so content gets cut off (fix: use 100dvh or the --vh custom-property trick), fixed-position headers that jump when the keyboard opens, and Safari’s “smart” form autofill rearranging your inputs. Test on real iOS, not just Chrome’s iOS emulation.
Why is my mobile checkout losing customers?
E-commerce specifically: tap targets too small, postal-code field that does not trigger numeric keyboard (fix: inputmode="numeric"), missing Apple Pay / Google Pay express options, multi-step checkout where the progress indicator is below the fold so users do not know how many steps remain, and shipping options that overflow the screen on a country with long carrier names. We covered checkout-specific levers in our Shopify development services overview; most apply equally to WooCommerce and custom builds.
Why are video and iframe embeds breaking the layout?
YouTube and Vimeo embed iframes have fixed widths by default and overflow narrow viewports. The fix is the responsive-iframe pattern: wrap the iframe in a container with position: relative; padding-bottom: 56.25% (for 16:9) and the iframe itself with position: absolute; top: 0; left: 0; width: 100%; height: 100%. WordPress block editor does this automatically since 6.0; older content needs auditing.
Why is the mobile font too small or hard to read?
Body copy under 16px is hard to read on a smartphone held at arm’s length. Many German sites still ship 14px body type because it looks elegant on desktop. Fix: minimum 16px for body, 18px for long-form content. Adjust line-height to 1.5–1.7 and limit measure to 60–75 characters on mobile via max-width on text containers.
Why are sticky bars covering my content?
Sticky headers, sticky promo bars, sticky cookie banners, and floating chat widgets compete for the top and bottom of every mobile viewport. Three sticky bars stacked together can leave 40% of the screen unusable. Audit your stack: one sticky header is fine, one sticky CTA bar is fine, but anything beyond two needs to be ruthlessly evaluated. The cookie banner should auto-collapse after consent — our cookie banner compliance guide for Germany covers the rules.
Why does my BFSG accessibility audit fail on mobile?
Since 2025, the Barrierefreiheitsstärkungsgesetz (BFSG) makes WCAG 2.1 AA compliance mandatory for many German websites — particularly e-commerce, financial services, telecom, and transport. Mobile-specific BFSG fail points: insufficient colour contrast on a glare-prone screen, touch targets below the 48×48 minimum, focus indicators that disappear when zooming, and form fields without proper labels. We covered the full landscape in our BFSG accessibility law guide.
A practical fix-it workflow for an existing site looks like this.
Start with measurement. Pull mobile-only Search Console data for the last 90 days. Identify the highest-traffic pages with the worst mobile usability scores. Those are your priority pages.
Audit the priority pages with the three-tool diagnosis above. Build a single backlog with each bug tagged by severity (blocking conversion, hurting UX, cosmetic) and estimated fix time.
Fix in order of biggest impact, smallest effort. Tap targets and viewport meta tag are often a single-day pass-through that lifts dozens of pages at once. Image optimisation and lazy loading are next. Form fixes are usually one CSS file and one inputmode pass.
Re-test on real devices. Emulation lies. Buy or borrow one cheap Android, one mid-range iPhone, and run the full conversion path. Anything that surprises you on real hardware becomes a P0 bug.
Set up monitoring. Add Google Search Console’s Mobile Usability report to your weekly review. Add PageSpeed Insights to a monthly cadence. Catch regressions before users do.
For a site with serious mobile-traffic dependency, this workflow takes one focused week from a competent front-end developer and an internal QA pass. The ROI shows up the next week in conversion analytics.
Frequently Asked Questions About Mobile Responsive Website Fixes
No — responsive is a CSS technique; mobile-friendly is the user-experience outcome.
No — separate mobile sites are a 2012 pattern; build one responsive site.
Done correctly, no — modern frameworks handle both in the same codebase.
Materially — mobile-first indexing, mobile CWV ranking signal, mobile usability deprioritisation.
Often: replace the theme — €4,000–€12,000 for a modern block theme in 2–4 weeks, content intact.
No — Google deprioritised AMP in 2021; fast responsive pages win in 2026.
Quarterly for content-heavy sites; monthly when shipping new pages or features.
Usually — 10–25% form lift, 15–40% bounce reduction, 5–15% transaction lift for e-commerce.
Want your mobile site audited and fixed properly?
Mobile responsiveness is one of those problems where the diagnosis is fast, the fixes are well-understood, and the ROI shows up within weeks. The site does not need to be rebuilt — it usually needs a focused two-week fix sprint.
If you want a quick honest read on what is hurting your mobile experience, or a fixed-price fix sprint that hands back a measurable improvement, our team works on this every week. Book a free 30-minute mobile audit consultation, explore our website development services, or send us a quick message with your URL — we will reply within one business day with three top issues we spotted and an honest estimate to fix them.