CSS Tutorial / Check Responsive CSS with Width, Zoom, and Keyboard Tests

Responsive CSS should remain usable at different viewport widths, zoom levels, and input conditions. Check for clipped content, unexpected page scrolling, hidden controls, and invisible keyboard focus instead of relying only on a single phone-sized preview.

Prepare a page for responsive checks

The flow size, media query, and image ratio learned in the previous lesson are collected on one page. If you save the following code as responsive-check.html, you can see menus, cards, images, long strings, and input forms together. The image is contained within the file and no separate library or server is required.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive-check.html</title>
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 sans-serif; color: #243447; }
h1, h2, p { margin-top: 0; } a { color: #145f8f; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #ac4100; outline-offset: 3px; }
.page { width: min(100%, 64rem); margin-inline: auto; padding: 1rem; }
.menu { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.menu a { display: block; padding: .65rem 1rem; background: #e8f3fa; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.card { min-width: 0; padding: 1rem; border: 1px solid #789; overflow-wrap: anywhere; }
.card h2 { font-size: 1.25rem; } .card img { display: block; max-width: 100%; height: auto; margin-bottom: 1rem; }
.form { width: min(100%, 28rem); margin-top: 2rem; }
label { display: block; font-weight: bold; }
input { width: 100%; min-width: 0; padding: .65rem; font: inherit; }
button { max-width: 100%; padding: .65rem 1rem; font: inherit; white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 42rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
</style>
</head>
<body>
<main class="page">
<h1>Check the same page under different conditions</h1>
<nav class="menu" aria-label="Lab Menu"><a href="#cards">Card description</a><a href="#request">Enter your question</a><a href="#result">Record check results</a></nav>
<section id="cards" class="cards">
<article class="card"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22300%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23287699%22%2F%3E%3Crect%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%23205c32%22%2F%3E%3Crect%20y%3D%22265%22%20width%3D%22400%22%20height%3D%2235%22%20fill%3D%22%239e3131%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22150%22%20r%3D%2270%22%20fill%3D%22%23f6ae4c%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3Crect%20x%3D%22358%22%20y%3D%22120%22%20width%3D%2230%22%20height%3D%2260%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E" width="400" height="300" alt="Practice illustration showing both the upper and lower bands and the center circle"><h2>Long descriptions can be read to the end if there is no fixed height.</h2><p>Zooming may reduce how much text fits on each line. The description and link below the image must stay visible even when the same content occupies more lines.</p><a href="#result">First card notes</a></article>
<article class="card"><h2>Card with a long identifier</h2><p class="token">REFERENCE_ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p><p>Long strings are wrapped without deleting the content itself.</p><a href="#result">Second card notes</a></article>
</section>
<form id="request" class="form" action="#request" method="get"><h2>Enter your question</h2><label for="email">Email</label><p id="help">Use test@example.com instead of a real address to try the input styling. This example has no server that stores information.</p><input id="email" name="email" type="email" aria-describedby="help" required><p><button type="submit">Check input format</button></p></form>
<section id="result"><h2>Check results</h2><p>Record the viewport width, zoom level, changed rules, and results in a separate note.</p></section>
</main>
</body>
</html>

This page was initially created to have no horizontal overflow. In later exercises, we will find the cause by adding and removing the CSS that creates the error one by one. If you copy the original file and leave it as responsive-check-original.html, it is easy to revert if you change various properties by mistake. The form submission is an example that does not send to a storage server and uses the suggested test address instead of actual personal information.

Sweep widths and test breakpoint boundaries

In Edge, open DevTools, enable device emulation, and enter a width in Responsive mode. Default Windows shortcuts are F12 or Ctrl+Shift+I for DevTools and Ctrl+Shift+M for device emulation. Toolbar labels and positions can vary by version; consult the Microsoft Edge device emulation guide. Compare widths immediately below and above each condition when CSS Media Queries and Content-Based Breakpoints.

1. At 320px and 390px, check whether the menu spans multiple lines and whether the image and input box fit within the text. Scroll all the way to the bottom and look for text truncation and horizontal scrolling across the page.
2. Slowly increase the width and check for areas where the cards are too narrow or there is unnecessary space between menus. You don't end up just choosing a few devices.
3. This example switches at 42rem. With a 16px initial font size, compare 671px, 672px, and 673px: 671px should have one card column, while 672px and 673px should have two.
4. On wider screens such as 1365px and 1920px, check to see if the maximum text width is maintained and the lines are not too long. Apart from device emulation, check operation, virtual keyboard, and screen rotation on the actual device being used.

Device emulation is an approximation tool that changes the width and some conditions. It does not replicate all of the fonts, touch controls, virtual keyboard, and browser behavior of a real device. We recommend that you check the input situation where the virtual keyboard appears at the bottom of the screen on the actual device.

Separate browser zoom and text size changes

As browser zoom increases the entire page, the viewport width that CSS can use may also change. Zoom in with Ctrl and + in Windows, and revert to default magnification with Ctrl+0. Setting the font size or enlarging only the font is a condition for separately checking the relationship between the text and the box. Experiments with changing the font-size of HTML in CSS should not be recorded as browser zooming.

1. Record the screen width at the default scale in the actual browser window and scale it to 200%. Check that the text in the menu text, card description, label, input box, and button is not cut off or overlapping.
2. Make sure your content is readable at higher magnifications. When enlarged by 400% based on the width of 1280 CSS px, the space is equivalent to approximately 320 CSS px, but the actual value may vary depending on the browser UI, scrollbar, etc.
3. Restore to default scaling and check again by significantly changing your browser font settings. The conditions and results of changing the default font, enlarging the page, and modifying CSS are recorded as separate items.

Accessibility checks include retaining content and function at 200% text resizing and reflowing ordinary vertically scrolling content within the equivalent of 320 CSS pixels without two-direction scrolling. Content such as a data table or map can have a justified two-dimensional exception, but that exception does not apply automatically to the whole page. For further detail, see W3C font size adjustment explanation, reflow explanation You can check the standards and exceptions in.

Reproduce and diagnose horizontal overflow

Just add the following declaration to the bottom of your original CSS and open it at 390px. The first card requires at least 40rem so it won't fit inside the screen. Select the card using element selection in developer tools and check the calculated width and min-width.

.card:first-child { min-width: 40rem; }

This issue may not be solved by just making the Grid columns smaller. This is because the item itself requires a minimum width. If you remove the declaration you added, it will return to the original min-width: 0. Double-check horizontal scrolling and card display at the same screen width.

After restoring, this time just add the following declaration: Check where long identifiers overflow, and remove the extra declarations to return them to anywhere. Putting two problems at once makes it difficult to know which change solved it. The fixed minimum width and handling of long strings are differentiated between CSS Overflow, Long Text Wrapping, and Ellipsis overflow handling.

.card { overflow-wrap: normal; }

You can quickly check whether the entire page is overflowing with the values below in the console. If the number on the right is larger than the left, it is a signal to look into the cause. This check only compares the width of the document and does not immediately tell you which element is causing it; the intended horizontal scroll area and hidden elements must also be determined separately.

({ viewport: window.innerWidth, document: document.documentElement.scrollWidth })

Find content clipped by fixed heights

With the original without any width issues, just add the following code to the bottom: Notice that the description or link at the bottom of the first card is cut off. The combination of fixed height and hiding is particularly problematic because enlarged text or long descriptions increase the required height.

.card:first-child { height: 10rem; overflow: hidden; }

Remove the declaration you added to revert to auto-height based on content. Even if the design goal is to match the height of short cards, avoid truncating information. Review alternatives such as setting a minimum height to allow empty space or adjusting placement conditions, and check again for long sentences and enlargement conditions. Hiding horizontal scrolling or continuously reducing font size to mask the problem is not a first choice for the same reason.

Check keyboard navigation and record results

After opening a new page, use Tab to move to the menu, card link, email input field and buttons in order. Move backwards with Shift+Tab and make sure the focus border is visible. Make sure that navigation to off-screen elements scrolls appropriately and that no fixed menus or other elements completely block focus. If you change the visual order using CSS, make sure it does not conflict with the HTML reading/keyboard order.

This table is an example of how to record and the actual inspection results are verified and populated in each environment. Even when recording that there were no problems, you must leave the conditions that were implemented so that you can compare them with subsequent changes. By separately checking the width, enlargement, content, and keyboard operation and retesting the original failure conditions after correction, you can reduce problems that are easy to miss by looking at just one screen.