Guides / Web basics

Responsive design: websites that fit every screen

Why your website has to work on a phone as well as a laptop, how that is done, and how to check yours.

Why your website must work on phones

Think about how you open websites. Often it is on a phone, from a link in a chat or a search on the bus. Many of your visitors will do the same. If your website only looks right on a wide laptop screen, phone visitors get tiny text, buttons too small to tap, and a page they have to drag sideways. Most people just leave.

Responsive design means building one website that changes its layout to fit any screen. On a laptop, a section might show three cards side by side. On a phone, the same cards stack in one column. The words and pictures stay the same. Only the arrangement changes.

Search engines care too. Google mainly looks at the phone version of a page when it decides how to rank it. Our SEO guide says more about that.

Step 1: the viewport tag

Phones were made before most websites were ready for them. So by default, a phone browser pretends its screen is wide, about 980 pixels, and shrinks the whole page down to fit. Everything looks tiny. One line in the page's head turns this off:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width tells the browser to use the real width of the screen. initial-scale=1 means "start with no zoom". Without this line, nothing else on this page works on a phone. Every website Kodebloc builds has it, right at the top of the head.

Step 2: fluid widths

A box set to exactly 1000 pixels wide will never fit on a phone that is 375 pixels wide. The fix is to use sizes that stretch and shrink:

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

img {
  max-width: 100%;
  height: auto;
}

The container fills the screen on a phone, but never grows wider than 1100 pixels on a big screen. margin: 0 auto keeps it in the middle. The padding stops the text from touching the screen edges. The img rule lets photos shrink to fit their box, and height: auto keeps them from stretching out of shape.

Flexbox and grid help too. They can let items wrap onto new lines when there is not enough room. Our CSS basics guide introduces both.

Step 3: media queries

Sometimes you want a different layout at a different size. A media query is a CSS rule that only applies when the screen matches a condition.

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Read it like this: "Show the cards in one column. When the screen is at least 768 pixels wide, show three columns." The width where the layout changes is called a breakpoint.

Notice the order. The simple phone layout comes first, and the media query adds the wider layout on top. This is called mobile-first. It tends to keep CSS shorter, because a phone layout is usually the simplest one.

How Kodebloc websites do it

Kodebloc is told to build every website mobile-first and to make it look good at three sizes: 375 pixels (a phone), 768 pixels (a tablet) and 1024 pixels or wider (a laptop). It writes its styles with Tailwind CSS, where a breakpoint is a short word in front of a class:

<section class="grid gap-10 md:grid-cols-2">
  <h1 class="text-5xl sm:text-6xl">Back on the road by Friday.</h1>
  <p class="text-lg">Same-week servicing for road, city and cargo bikes.</p>
</section>

• grid gap-10 applies on every screen. On a phone, the heading and paragraph stack.
• md:grid-cols-2 means "two columns from 768 pixels wide", so on a tablet or laptop they sit side by side.
• sm:text-6xl makes the heading bigger from 640 pixels wide.

Each of these prefixes is a media query underneath. md: is the same as @media (min-width: 768px), and lg: starts at 1024 pixels.

Kodebloc does one more thing for phones: photos further down the page only load when the visitor scrolls near them. On a slow phone connection, that helps the top of the page appear sooner.

How to check your website

In the Kodebloc editor

Above the preview of your website there are three small buttons: a monitor (Desktop view), a tablet (Tablet view) and a phone (Mobile view). Click the phone to see your website at 375 pixels wide, and the tablet for 768 pixels. Scroll the whole page at each size.

In your browser's device toolbar

Every desktop browser has a tool that pretends to be a phone screen. It works on any website, including your published one.

1. Open your website in Chrome, Edge or Firefox.
2. Press F12 (or Cmd+Option+I on a Mac) to open the developer tools.
3. Press Ctrl+Shift+M (or Cmd+Shift+M on a Mac) to turn on the device toolbar.
4. Pick a phone from the list at the top, or drag the edge of the page to make it narrower and wider.

Dragging slowly from wide to narrow is a great test. Watch for the moment something breaks, like text that overlaps or a row that spills off the side.

On a real phone

A pretend phone is good, but a real one is better. Real fingers are bigger than a mouse pointer, and real screens have notches and browser bars. Once you publish your website, open its link on your own phone, or ask a friend to try it on theirs.

What to look for

• Can you read every word without zooming in?
• Is there any sideways scrolling? There should be none.
• Are buttons and links big enough to tap, with space between them?
• Does the menu open and close, and does every menu link work?
• Do photos fit, without being cut off in an odd place or stretched?
• Does the contact form fit, and can you type in every box?

Found a problem? Switch the preview to Mobile view, click + next to the message box, choose Pick a part of your page, click the part that looks wrong, and describe the fix in the chat, for example "On phones, stack these three cards in one column".