W3.CSS — Responsive

Responsive Classes

W3.CSS provides responsive classes for different screen sizes:

<!-- Hide on small screens -->
<div class="w3-hide-small">Hidden on small screens</div>

<!-- Hide on medium screens -->
<div class="w3-hide-medium">Hidden on medium screens</div>

<!-- Hide on large screens -->
<div class="w3-hide-large">Hidden on large screens</div>

Show Classes

<!-- Show only on small screens -->
<div class="w3-show-small">Visible only on small screens</div>

<!-- Show only on medium screens -->
<div class="w3-show-medium">Visible only on medium screens</div>

<!-- Show only on large screens -->
<div class="w3-show-large">Visible only on large screens</div>

Responsive Widths

<!-- Half width on mobile, full on tablet/desktop -->
<div class="w3-half w3-container">Half width</div>

<!-- Third width -->
<div class="w3-third w3-container">Third width</div>

<!-- Quarter width -->
<div class="w3-quarter w3-container">Quarter width</div>

Responsive Layout

<!-- Responsive columns -->
<div class="w3-row-padding">
    <div class="w3-third">
        <div class="w3-card-4">
            <div class="w3-container">
                <h4>Column 1</h4>
            </div>
        </div>
    </div>
    <div class="w3-third">
        <div class="w3-card-4">
            <div class="w3-container">
                <h4>Column 2</h4>
            </div>
        </div>
    </div>
    <div class="w3-third">
        <div class="w3-card-4">
            <div class="w3-container">
                <h4>Column 3</h4>
            </div>
        </div>
    </div>
</div>

Responsive Examples

<!-- Mobile-first layout -->
<div class="w3-container">
    <div class="w3-row">
        <div class="w3-col m8 l9">
            <!-- Main content -->
            <div class="w3-card-4 w3-padding">
                <h3>Main Content</h3>
                <p>This takes 8 columns on tablet, 9 on desktop.</p>
            </div>
        </div>
        <div class="w3-col m4 l3">
            <!-- Sidebar -->
            <div class="w3-card-4 w3-padding">
                <h3>Sidebar</h3>
                <p>This takes 4 columns on tablet, 3 on desktop.</p>
            </div>
        </div>
    </div>
</div>

Screen Size Classes

Class	Description
w3-hide-small	Hidden on small screens
w3-hide-medium	Hidden on medium screens
w3-hide-large	Hidden on large screens
w3-show-small	Visible on small screens
w3-show-medium	Visible on medium screens
w3-show-large	Visible on large screens

Mini Practice

Create HTML code that:

1. Creates a responsive layout
2. Uses hide/show classes
3. Creates a responsive navigation
4. Builds a responsive card grid

Up Next

Next: Learn about W3.CSS Grid.