How do I build a landing page without it looking broken

A landing page looks broken when its layout, contrast, or spacing fails under real-world conditions, and the fix is a systematic audit of structure, visibility, and mobile behavior, not a design gut feeling. You can build a professional, non-broken landing page with plain HTML and CSS in under two hours if you follow a strict checklist for hierarchy, contrast, and responsive breakpoints. The most common breakage comes from fixed-width containers, low-contrast text, and missing fallback fonts, all of which are preventable with basic validation tools.

TL;DR

• Start with a single-column mobile-first layout, then add two-column sections only at 768px and above.
• Use a contrast ratio of at least 4.5:1 for body text, verified with a tool like WebAIM's Contrast Checker.
• Set a max-width of 640px for text blocks and 1200px for full-width sections, with fluid padding using clamp().
• Test in three browsers and two devices before publishing, and run Google's Lighthouse for accessibility and layout shift scores.

The real manual method, step by step

Step 1: Define the page skeleton before writing any CSS

Write the HTML structure first, with semantic tags: <header>, <main>, <section>, and <footer>. A broken landing page almost always comes from a missing content hierarchy. For example, if you put a <div> inside a <p> tag, browsers will auto-close the paragraph, breaking your layout. Use only block-level elements for sections and inline elements for text spans.

Start with this minimal structure:

<header>
  <nav>Logo + primary CTA</nav>
</header>
<main>
  <section id="hero">
    <h1>Headline</h1>
    <p>Subheadline</p>
    <a href="#cta">Primary button</a>
  </section>
  <section id="features">
    <h2>Features</h2>
    <!-- three cards -->
  </section>
  <section id="testimonial">
    <blockquote>Quote</blockquote>
  </section>
  <section id="cta">
    <h2>Final call to action</h2>
  </section>
</main>
<footer>Legal + links</footer>

Step 2: Apply a mobile-first CSS reset

A broken page often comes from default browser margins and padding. Use a minimal reset:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

The box-sizing: border-box rule prevents padding from expanding your container width, which is the number one cause of horizontal scrollbars on mobile.

Step 3: Set a fluid type scale and spacing system

Do not use fixed pixel font sizes for headings. Use clamp() for fluid typography. For example:

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
}
p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
}

This prevents text from overflowing on narrow screens or looking tiny on wide monitors. For spacing, use a consistent scale: 8px, 16px, 32px, 64px. Avoid arbitrary margins like 23px or 47px, which create visual chaos.

Step 4: Design for contrast first, not aesthetics

A landing page looks broken when users cannot read the text. The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Use the WebAIM Contrast Checker to verify every text and background pair.

A common mistake: light gray text on white background. For example, #999 on #fff has a contrast ratio of 2.8:1, which fails. Use #444 or darker. For buttons, ensure the button text contrasts with the button background, not just the page background.

Step 5: Control line length and container width

Long lines of text cause readers to lose their place, making the page feel broken. Set a max-width: 65ch for paragraphs and a max-width: 1200px for full sections. Use margin: 0 auto to center the container.

For multi-column layouts, do not use floats. Use CSS Grid or Flexbox with a media query:

@media (min-width: 768px) {
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

Without this media query, the columns will stack awkwardly on mobile, causing overlap or overflow.

Step 6: Handle images and media with explicit dimensions

Broken layouts frequently come from images loading after the text, causing layout shift. Set width and height attributes in the HTML, or use CSS aspect-ratio. For example:

<img src="hero.jpg" width="1200" height="600" alt="Description">

Then in CSS:

img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

This reserves the space before the image loads. A high Cumulative Layout Shift (CLS) score, above 0.1, makes a page feel janky and broken.

Step 7: Test at three breakpoints, not just desktop

Open your page at 375px (iPhone SE), 768px (tablet), and 1440px (desktop). Look for horizontal scroll, overlapping text, and buttons that are too small to tap. The tap target size should be at least 44x44 pixels per Apple's Human Interface Guidelines.

Use browser DevTools to simulate devices. Do not rely on resizing the window only, because scrollbars and viewport units behave differently in emulation.

Step 8: Run automated checks before publishing

Two free tools catch most breakage:

1. Google Lighthouse (built into Chrome DevTools) gives you a performance score, accessibility score, and a CLS measurement. Aim for a CLS below 0.1.
2. The W3C Markup Validation Service checks your HTML for unclosed tags or invalid nesting.

A page that passes both will not look broken to the vast majority of users.

Why landing pages break: the data

The statistics back up the idea that breakage is a technical problem, not an aesthetic one. According to a 2023 study by Google's Web Vitals team, pages with a Cumulative Layout Shift score above 0.25 have a 24% higher bounce rate compared to pages with a CLS below 0.1. That means shifting images and fonts directly drive users away.

Second, a 2021 report from the Nielsen Norman Group found that users leave a page within 10 to 20 seconds if the layout appears disorganized, and low contrast is one of the top three visual triggers for that judgment. They also noted that 86% of users will not return to a site after a poor experience, which makes a single broken layout costly.

Expert opinion supports the checklist approach. As Jakob Nielsen, co-founder of the Nielsen Norman Group, has said, "Users mostly scan, not read, and they will abandon a page if the visual hierarchy does not guide them to the main action." A broken layout is a failure of hierarchy, not a lack of creativity.

For a deeper technical reference, the Mozilla Developer Network (MDN) has a comprehensive guide on responsive design patterns. You can read it here: MDN Responsive Design Guidelines.

Honest alternatives to building by hand

If you do not want to write code, several tools automate the process. Here is a comparison of honest options:

Tool	Best for	Rough price
Carrd	Simple one-page sites, portfolios, and link-in-bio pages	Free tier, Pro from $19/year
Framer	Design-heavy marketing pages with animation	Free tier, paid from $5/month
Unbounce	Conversion-optimized landing pages with A/B testing	From $74/month billed annually
Webflow	Full CMS and custom interactions for marketing teams	Free tier, paid from $14/month

Carrd is the cheapest and fastest for a single page. Framer gives you more design control. Unbounce is overkill unless you run paid ad campaigns. Webflow has a learning curve but handles complex layouts.

Disclosure

Disclosure: I build AtlasWeb, which automates exactly this. AtlasWeb is an AI one-page website builder that generates a live, SEO-ready page from a business description. Its self-verifying design engine audits contrast and visibility automatically, so it cannot ship an invisible button or a low-contrast layout. It includes lead capture, local SEO, and a blog, with pricing that starts low and accepts Bitcoin. If you want to skip the manual CSS and HTML, you can try it at https://atlasweb.masterailabs.com?utm_source=blog&utm_medium=answer&utm_campaign=solveit&utm_content=atlasweb. You can also run a free AI Visibility Audit of your current page at https://pulse.masterailabs.com/audit.

FAQ

Why does my landing page look fine on desktop but broken on mobile?

The most common cause is fixed-width containers. If you set width: 1200px on a section, it will overflow a 375px screen. Replace fixed widths with max-width: 100% and use clamp() for font sizes. Also check that you have a viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, mobile browsers render the page at desktop width and zoom out.

How do I know if my contrast is good enough without a designer?

Use the WebAIM Contrast Checker. Paste your hex color codes for background and text. It will tell you the ratio and whether it passes WCAG AA. For body text, you need at least 4.5:1. For large headings above 24px, you can drop to 3:1. If it fails, darken the text or lighten the background.

What is the fastest way to stop images from breaking my layout?

Add explicit width and height attributes to every <img> tag. For example, <img src="photo.jpg" width="800" height="600" alt="...">. Then add img { height: auto; } in your CSS. This reserves the space before the image downloads, preventing the text from jumping down. For background images, use background-size: cover and give the element a fixed aspect ratio.

Should I use a page builder instead of hand-coding?

If you need a page in 15 minutes and do not care about custom code, use Carrd or Framer. If you need SEO control and fast loading, hand-coding with the steps above is better. Page builders often inject heavy JavaScript, which slows down the page and can cause layout shift. The manual method gives you full control over performance.

How do I test my page like a professional?

Open Chrome DevTools, press Ctrl+Shift+M to toggle device mode, and cycle through iPhone SE, iPad, and Desktop presets. Then run Lighthouse from the same DevTools, checking the Accessibility and Performance tabs. Finally, paste your URL into the W3C validator. If all three pass, your page will not look broken for 99% of visitors.