Making a Website Mobile-Friendly

You can use responsive design techniques to make a website mobile-friendly. This involves using fluid layouts and CSS media queries to adapt the design based on the user's screen size.

A mobile-friendly website automatically adjusts to look great on desktop monitors, tablets, and smartphones alike. Users shouldn't have to zoom in or scroll horizontally to read your content when viewing it on smaller screen sizes.

Fluid vs. Fixed Widths

One of the first rules of mobile-friendly design is to avoid fixed widths for your layout containers. If you set a wrapper to width: 1000px;, it will force a horizontal scrollbar on any screen smaller than that.

Instead, use percentages (e.g., width: 100%;) or the max-width property. max-width: 1000px; allows the container to be up to 1000px wide on large screens, but lets it fluidly shrink on smaller devices.

CSS Media Queries

While fluid widths solve part of the problem, sometimes you need to completely change your layout for mobile. For example, a three-column layout needs to stack into a single column on a smartphone. We achieve this using CSS @media rules. This is what we mean by using media queries.

A media query allows you to apply CSS only when specific conditions are met, such as when the screen is below a certain width (called a "breakpoint"):

Full Working Example

In the following example, try resizing your browser window. When the screen drops below 600px wide, the media query kicks in, and the sidebar drops below the main article to create a mobile-friendly view:

<!DOCTYPE html>
<html>
<head>
<title>Mobile-Friendly Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
  }
  .container {
    padding: 20px;
  }
  .card {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  /* Desktop layout: Elements sit side-by-side */
  .layout-wrapper {
    display: flex;
    gap: 20px;
  }
  .main-content {
    flex: 2;
  }
  .sidebar {
    flex: 1;
  }
  
  /* Mobile layout: Breakpoint at 600px */
  @media (max-width: 600px) {
    .layout-wrapper {
      flex-direction: column; /* Stack vertically instead of horizontally */
    }
    .card {
      padding: 15px; /* Slightly smaller padding for smaller screens */
    }
  }
</style>
</head>
<body>

<div class="container">
  <h2>Responsive Layout Showcase</h2>
  <p>Resize your browser window (or view on mobile) to see the layout stack vertically.</p>
  
  <div class="layout-wrapper">
    <div class="main-content">
      <div class="card">
        <h3>Main Article</h3>
        <p>This section takes up more space on wide screens, but fills the whole width on smaller devices.</p>
      </div>
    </div>
    
    <div class="sidebar">
      <div class="card">
        <h3>Sidebar Widget</h3>
        <p>This widget sits to the right on desktops, but drops underneath the main article on mobile phones.</p>
      </div>
    </div>
  </div>
</div>

</body>
</html>

View Output Full Screen Preview

Tip: The Meta Viewport Tag

Media queries won't work correctly on mobile devices unless you include the viewport meta tag in your HTML header. We cover this important element in How to Add a Viewport Meta Tag.