W3.CSS Mobile Layouts
Mobile-Friendly Layouts
W3.CSS makes it easy to create layouts that work well on all streen sizes:
- Phones
- Tablets
- Laptops
- Desktops
On large screens, content can be displayed in several columns.
On small screens, columns can be stacked vertically.
Mobile Flexbox Layouts
The w3-flex-mobile class makes flex items stack vertically on small screens.
Use it together with w3-flex to create a responsive flex container.
Item 1
First flex item.
Item 2
Second flex item.
Item 3
Third flex item.
Example
<div class="w3-flex w3-flex-mobile w3-gap">
<div class="w3-container w3-blue">
<p>Item 1</p>
</div>
<div class="w3-container w3-green">
<p>Item 2</p>
</div>
<div class="w3-container w3-red">
<p>Item 3</p>
</div>
</div>
Try it Yourself »
On larger screens, the flex items are arranged in a row.
On small screens, the items are arranged in a column.
The w3-gap class adds space between the items in both layouts.
The w3-flex-mobile class changes the direction of the flex items.
It does not create a flex container by itself.
Use w3-flex together with w3-flex-mobile.
Mobile Grid Layouts
The w3-grid-mobile class changes a grid layout to one column on small screens.
It can be combined with w3-grid-2, w3-grid-3, or w3-grid-4.
Column 1
First grid item.
Column 2
Second grid item.
Column 3
Third grid item.
Example
<div class="w3-grid-3 w3-grid-mobile w3-gap">
<div class="w3-container w3-blue">
<p>Column 1</p>
</div>
<div class="w3-container w3-green">
<p>Column 2</p>
</div>
<div class="w3-container w3-red">
<p>Column 3</p>
</div>
</div>
Try it Yourself »
On larger screens, the grid displays three columns.
On small screens, the grid displays one column.
The w3-grid-mobile class changes the number of grid columns.
It does not create a grid container by itself.
Use it together with a grid class such as w3-grid-3.
Automatic Responsive Grids
W3.CSS also provides grid classes that automatically adjust the number of columns.
The w3-grid-auto class creates as many columns as can fit in the available space.
The columns automatically wrap when the container becomes narrower.
HTML
Learn HTML.
CSS
Learn CSS.
JavaScript
Learn JavaScript.
Example
<div class="w3-grid-auto w3-gap">
<div class="w3-container w3-blue">
<h3>HTML</h3>
</div>
<div class="w3-container w3-green">
<h3>CSS</h3>
</div>
<div class="w3-container w3-red">
<h3>JavaScript</h3>
</div>
</div>
Try it Yourself »
Unlike w3-grid-3, the w3-grid-auto class does not use a fixed number of columns.
You do not need to add w3-grid-mobile because the grid already adjusts automatically.
Mobile-First
Mobile-first design is a web development and design approach that builds a website or application for small mobile screens first, before scaling up to larger screens like tablets and desktops.
- Content Prioritization
Forces designers to choose only the most essential features and information, removing clutter from small screens. - Progressive Enhancement
Starts with a lightweight, fast-loading base for mobile and adds richer features, complex layouts, and advanced interactions as screen space increases. - Touch-Friendly Navigation
Utilizes large buttons, readable scalable fonts, and simplified menus (like hamburger icons) that work well with a thumb or finger.
Why Mobile-First?
- Google Mobile-First Indexing
Google crawls and evaluates a site primarily from the perspective of a mobile user. Sites lacking a fully functional mobile layout see their overall search visibility suffer. - Traffic Dominance
Mobile platforms account for nearly 65% of global web traffic. - Additive Performance
It is much easier to scale a streamlined, lightweight mobile page up into a desktop page than it is to squeeze a heavy, script-bloated desktop page down into an efficient mobile layout.
Mobile-first means designing a layout for small screens first.
Additional columns for larger screens are added later.
This layout building approach keeps web design simpler.
Mobile First Rows
The W3.CSS w3-row class supports mobile first column classes.
The column classes like w3-half,
w3-third, and w3-quarter, all stack automatically on small screens.
Column 1
First column.
Column 2
Second column.
Example
<div class="w3-row">
<div class="w3-half w3-container w3-blue">
<h3>Column 1</h3>
<p>First column.</p>
</div>
<div class="w3-half w3-container w3-green">
<h3>Column 2</h3>
<p>Second column.</p>
</div>
</div>
Try it Yourself »
On larger screens, the columns share the available width.
On small screens, each column takes the full width and appears below the previous column.
You do not need to add w3-mobile to w3-half or w3-third.
These column classes already include responsive behavior.
The w3-grid-auto Class
The w3-grid-auto class is a good example of a responsive layout that works
well with a mobile-first approach.
It uses one column when there is not enough room for more columns.
As more space becomes available, additional columns appear automatically.
Example
<div class="w3-grid-auto w3-gap">
<div class="w3-container w3-blue">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-red">Three</div>
</div>
Try it Yourself »
The w3-flex-mobile and w3-grid-mobile classes use a different approach.
They start with a row or multi-column layout and change it for smaller screens.
Both approaches can create mobile-friendly pages.
The w3-mobile Class
The w3-mobile class makes an element use the full available width on small screens.
This is useful for buttons, input fields, and other elements that should be easier to use on mobile devices.
Example
<button class="w3-button w3-blue w3-mobile">Button 1</button>
<button class="w3-button w3-green w3-mobile">Button 2</button>
<button class="w3-button w3-red w3-mobile">Button 3</button>
Try it Yourself »
Note
The w3-mobile class applies a mobile layout when the screen width is 600 pixels or less.
In the "Try it Yoursef" example, try to resize the browser window to see the buttons change from normal width to full screen width.
Choosing a Mobile Layout
W3.CSS provides several ways to create responsive layouts.
The best choice depends on the layout you want to build.
| Class | Best For |
|---|---|
w3-flex-mobile |
Changes all flex items to full with on small screens |
w3-grid-mobile |
Changes all grid items to full width on small screens |
w3-grid-auto |
Adjust the number of grid columns to available space |
w3-row |
Traditional responsive mobile first column layouts |
w3-mobile |
Make any element full width on small screens |
Use w3-mobile when individual elements should become full width.
Use w3-flex-mobile when flex items should stack vertically.
Use w3-grid-mobile when a grid should become one column.
Use w3-grid-auto when you want the number of columns to adjust automatically.
