What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Build a responsive template by starting with a narrow, single-column layout, making its content fluid, and adding CSS changes only when the layout needs more room. Set the viewport meta tag, use Flexbox or Grid for the right kind of layout, and test the page across changing widths and at high zoom—not just on a few named devices.
What makes an HTML template responsive?
A responsive template lets its layout and content adapt to different screen sizes and resolutions while remaining usable. It is not a fixed desktop page scaled down to fit a phone: columns may stack, navigation may wrap, and images must fit their containers. MDN describes responsive web design as an approach for rendering pages well across screen sizes and resolutions while maintaining usability.
The foundation is a sensible reading order in the HTML, flexible dimensions in CSS, and selective layout changes when the content needs them. A template should continue to work between familiar device sizes, not only at the width of a particular phone or tablet.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Start with semantic HTML and the viewport
Use HTML elements that reflect each region’s purpose, and put them in the order a person should read and navigate them. A sidebar that follows the main article in the source can move below it on a narrow screen without changing the underlying reading sequence.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Put this viewport declaration in the document’s head:
<meta name="viewport" content="width=device-width">This tells mobile browsers to use the device’s width as the viewport width. Without it, a phone may lay out the page against a much wider, roughly 980-pixel viewport and show a zoomed-out desktop-style page. The declaration does not make a layout responsive by itself; the CSS must still allow the content to adapt.
A minimal responsive template
This example uses a fluid centered container, a single-column base layout, and a Grid change at a relative width. Replace the sample text with your content while keeping the semantic regions and logical source order.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Responsive template</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<a href="/">Site name</a>
<nav aria-label="Main navigation">
<a href="/about">About</a>
<a href="/articles">Articles</a>
</nav>
</header>
<main class="layout">
<article class="content">
<h1>Page title</h1>
<p>Main content goes here.</p>
</article>
<aside class="sidebar" aria-label="Related information">
<h2>Related</h2>
<p>Supporting content goes here.</p>
</aside>
</main>
<footer>Footer content</footer>
</body>
</html>* { box-sizing: border-box; }
body {
margin: 0;
font: 1rem/1.5 system-ui, sans-serif;
}
.site-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
}
.site-header nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.layout {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
display: grid;
gap: 1.5rem;
}
.content,
.sidebar {
min-width: 0;
}
img,
video {
max-width: 100%;
height: auto;
}
@media (min-width: 50rem) {
.layout {
grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
}
}At narrow widths, the main content and sidebar occupy successive rows. At the breakpoint, Grid places them in two columns while preserving their source order. The container remains no wider than 72rem, but leaves a 1rem margin on each side when the available width is smaller. min-width: 0 lets grid items shrink instead of forcing the track wider than its container.
Choose fluid sizes before adding breakpoints
Fixed page widths are a common cause of horizontal scrolling. Prefer relative units and flexible constraints: percentages for proportions, rem for type and spacing, max-width to limit overly wide content, and functions such as min() and clamp() when a value should adapt within sensible bounds. Grid tracks such as minmax(0, 2fr) can share available space without hard-coding every column width.
Images and other media need their own constraints. A basic rule such as img { max-width: 100%; height: auto; } keeps an image from exceeding its container while maintaining its proportions. Check long URLs, unbroken strings, tables, and embedded content too; they can overflow even when the main columns are flexible.
Use a breakpoint when the current composition becomes cramped or difficult to use. For example, a two-column article and sidebar may need to become one column at a narrow width. The exact breakpoint depends on the content, so resize the page and identify where the change becomes useful rather than choosing a number solely because it matches a device label.
Flexbox or Grid: which should you use?
Both layout systems can reduce the need for explicit media queries by distributing or wrapping content as available space changes. Choose based on the shape of the layout:
- Flexbox: use it for one-dimensional arrangements, such as a row of navigation links, a column of controls, or cards that grow, shrink, and wrap along one axis.
- Grid: use it when you need to manage rows and columns together, such as a page shell with main content and a sidebar.
You can combine them. The example uses Grid for the page’s two-dimensional main-and-sidebar structure and Flexbox for the header’s one-dimensional navigation. Neither system requires you to define a media query for every element; a wrapping flex row or flexible grid tracks may respond naturally without one.
When to use Bootstrap instead of hand-written CSS
Hand-written Flexbox and Grid give direct control over markup and layout without adding a framework dependency. Bootstrap offers ready-made conventions and an official mobile-first fluid grid that scales to 12 columns. That can be useful when a team already knows its class system and wants to follow its conventions.
Choose between them by considering how much control you need over markup, the amount of CSS you want to ship, whether the framework’s breakpoints fit your content, the accessibility behavior you need, your team’s familiarity, and ongoing maintenance. Bootstrap’s class system and version-specific breakpoints become part of the project; a custom layout avoids that dependency but leaves the team responsible for its CSS decisions. Bootstrap is optional, not a prerequisite for responsive design.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesKeep reading order and zoom usable
Responsive layout is not only about fitting content into a viewport. Keep the DOM order logical so reading and keyboard navigation follow the intended sequence. Flexbox’s order property and reverse-direction settings can visually move items without changing their source order; that can disconnect what a keyboard user encounters from what appears on screen.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Check that content reflows when users zoom substantially. W3C’s accessibility guidance describes layout regions that enlarge, shrink, or wrap in available space and respond to zoom. A 400% zoom check is a useful way to expose layouts that rely on fixed widths or become difficult to navigate when enlarged.
Test the template across its range
Resize continuously rather than checking only a short list of device presets. A layout can look correct at two endpoint widths and still break between them.
- Start narrow and inspect the page at a phone-sized width: look for horizontal scrolling, clipped controls, overlapping text, and images wider than their containers.
- Widen the viewport gradually. Watch for cramped navigation, awkwardly long text lines, excessive empty space, or a sidebar that should move into a separate column.
- Check an intermediate width, a wide desktop width, and landscape orientation. Confirm that the layout changes when its content needs the room, not at an arbitrary device boundary.
- Use the keyboard to move through links and controls. Confirm the focus sequence follows the visible, logical reading order.
- Zoom to 400% and check whether the page reflows without losing content or essential functionality.
These checks are verification guidance, not a claim that this sample has been tested on every browser or device. Responsive behavior can also depend on the content inserted into the template, so test with realistic text, images, navigation labels, and other components.
Or skip the browser setup
If you need a screenshot of a page to check how it renders, ScreenshotNeo provides a website screenshot API and MCP server for developers. Its API returns an image or PDF from a GET request. Cookie banners, newsletter popups, and chat widgets are removed before capture; those cleanup steps can be turned off. Bot checks, blank pages, and failed loads are not billed. The MCP server lets AI agents using Claude, Cursor, or another MCP client take screenshots. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000.
For example, this cURL request saves a WebP screenshot of a page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Sign up for 1,000 free screenshots a month, with no card required.
Troubleshoot common responsive-layout problems
- The phone shows a tiny desktop page. Check that the viewport meta tag is present in the document head and uses
width=device-width. - The page scrolls sideways. Look for fixed-width containers, wide media, long unbroken text, or a grid item that cannot shrink. Keep media within its container and use flexible tracks;
min-width: 0can help grid children fit. - The navigation runs off the screen. Let the links wrap with Flexbox, reduce unnecessary spacing, or change the navigation presentation when it no longer fits comfortably. Do not rely on a device-specific width without checking the content.
- The sidebar squeezes the article. Keep the narrow layout in one column and add the second track only when both columns have enough room. A minimum sidebar track can prevent it becoming unusably narrow, but the total tracks and gap must still fit the container.
- The layout looks right but keyboard order feels wrong. Inspect the source order and any Flexbox ordering or reverse-direction rules. Align the visual order with the DOM sequence rather than using CSS to disguise a poorly ordered document.
- Zoom causes clipped or overlapping content. Remove unnecessary fixed widths and verify that layout regions can shrink or wrap. Recheck long labels and controls at high zoom, not only the main paragraph text.
Questions developers often ask
Do I need a media query for every screen size?
No. Flexible containers, Grid, and wrapping Flexbox can handle many width changes without a query. Add a media query when a meaningful layout change is needed.
Recommended Free Tools
Can I make a template responsive without Bootstrap?
Yes. HTML and CSS with fluid sizing, Flexbox, Grid, and content-driven breakpoints are sufficient. Bootstrap is an optional framework, not a requirement.
Should I design for specific phone and tablet models?
Build around the width at which your actual content needs a different arrangement. Testing device examples can help, but they should not replace checking the continuous range of widths.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
