Showing Different Content on Mobile

Show a different version of your page depending on the device

Learn how to combine display: none with media queries to show desktop-only or mobile-only content, and how to stack columns on smaller screens.

💡 The Concept

The ability to show or hide content on mobile lets you tailor the experience for phone users without building a separate site. One of the most powerful techniques in responsive design is showing completely different content depending on screen size. You can create a full desktop version of a section and a simplified mobile version, then use media queries and display: none to show only the right one.

Hiding Elements on Mobile

Combine display: none with a media query to remove elements entirely on smaller screens:

@media (max-width: 768px) {
   .sidebar {
      display: none;
   }
}

Showing Two Different Versions

The real trick is having two separate versions of an element and toggling which one is visible. This lets you show a detailed desktop version and a simpler mobile version without writing complicated CSS overrides:

<!-- Desktop version: hide on mobile -->
<div class="desktop-only">
   <img src="large-banner.jpg" alt="Banner" />
   <p>Read our full story...</p>
</div>

<!-- Mobile version: hide on desktop -->
<div class="mobile-only">
   <p>Short version for mobile.</p>
</div>

.mobile-only {
   display: none;
}

@media (max-width: 768px) {
   .desktop-only {
      display: none;
   }
   .mobile-only {
      display: block;
   }
}

On desktop, .mobile-only is hidden. Inside the media query, .desktop-only gets turned off and .mobile-only gets turned on. Only one version is ever visible at a time.

🎬 The Video

This video demonstrates how to use media queries with display: none to show different content on mobile.

Let’s Do It

Step 1. Open JSFiddle.

Step 2. Create two h1 tags with different text. We want to use the longer title “Beautiful Sunsets” on larger devices, but simply use the title “Sunsets” on smaller devices.

Step 3. Add a class of “mobile” to one and a class of “desktop” to the other.

Step 4. Using display:none and display:block, make one appear on smaller devices and the other on larger devices. Use 400px for the breakpoint.

💡 Why 400px instead of 768px? On a real website you would usually switch to mobile styles around 768px. JSFiddle’s result panel is already narrow, so a smaller breakpoint like 400px lets you drag the panel back and forth and clearly see the title switch.

Check your work in JSFiddle. Resize the browser box so you can see the <h1> switch.

Using display none inside a media query to hide an element on mobile — The sidebar is visible on desktop but disappears completely on screens 768px or narrower.

❓ Frequently Asked Questions

Does hiding content with display: none hurt SEO or accessibility?

When you use display: none, the element is completely removed from the rendered page. Screen readers skip it and it takes up no space. That is fine for hiding a duplicate or decorative element, but never hide something a mobile visitor still needs. When you provide a desktop version and a mobile version, keep the essential information in both so every visitor gets it. Swapping content this way for responsive design is a normal, accepted practice, so search engines will not penalize you as long as both versions cover the same content.

Why build two separate versions instead of just restyling one element?

Sometimes a single element only needs a small CSS adjustment, like a smaller font size on a phone. But when the desktop and mobile experiences are genuinely different, such as a large image with a long description on desktop versus one short line of text on mobile, it is cleaner to build two separate elements and toggle which one shows. This avoids piling up complicated overrides and keeps each version easy to read and maintain.

What screen widths should I use for my breakpoints?

The traditional breakpoints are 768px and under for smartphones and 1024px and under for tablets. These are a solid starting point, but the best approach is to design for every screen size, not just two or three. When you test your site, watch for the points where your own layout starts to break, and do not hesitate to add more breakpoints wherever they are needed. In this lesson’s exercise we used 400px only because it makes the title switch easy to see inside JSFiddle’s narrow preview panel.

★ Key Takeaways

Responsive design is about more than just resizing elements. This lesson showed you how to show or hide different content depending on the screen size using CSS. Coming up is HTML Tables, where you will learn when and how to use tables to display structured data. Tables are great for schedules, pricing charts, and comparison layouts.

Next Lesson: HTML Tables: When and How to Use Them

← Back to Responsive Design Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.