How to hide content on mobile with CSS media queries
Learn to use CSS media queries to display different content on desktop and mobile devices. This guide covers hiding specific elements, showing only mobile-only text, and adjusting layouts for smaller screens using standard CSS syntax.
You will learn how to use CSS media queries to hide specific elements on mobile devices while keeping them visible on desktop. These steps apply to any web project using HTML and CSS, targeting standard viewport widths found on smartphones and tablets. You will write media queries that apply styles only when the screen width is below a certain threshold, effectively hiding content.
Prerequisites
- A text editor or code editor installed on your computer.
- A basic understanding of HTML structure and CSS syntax.
- A web browser to test the changes in real time.
- Access to a local server or a live website to view the results.
Step 1: Add the viewport meta tag
Before hiding content, you must ensure your HTML document scales correctly to the device width. Without the viewport meta tag, mobile browsers may zoom out or ignore your media queries. Add this tag inside the <head> section of your HTML file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Expected output when viewing the page on a mobile device:
Device width: 360px
Viewport width: 360px
Scale: 1.0Step 2: Create a basic media query
Define a media query that targets screens with a maximum width of 768 pixels. This breakpoint is standard for hiding content on tablets and large phones. Place the CSS inside a <style> block or an external stylesheet.
@media (max-width: 768px) {
/* Styles go here */
}This rule applies only when the screen is 768px wide or smaller. Any element inside this block will be affected only on mobile devices. You will replace the comment with the specific hiding logic.
Step 3: Hide a specific element
Select the HTML element you want to hide and set its display property to none. Use the element's class or ID to target it precisely. Do not remove the element from the HTML; simply change its visibility.
@media (max-width: 768px) {
.desktop-only-content {
display: none;
}
}Expected output when inspecting the page on a mobile device:
Element .desktop-only-content:
- Display: none
- Visibility: hidden
- Space occupied: removed from layoutStep 4: Hide multiple elements at once
Select multiple elements using commas to hide them together. This saves space in your stylesheet and keeps your code clean. List each selector inside the media query block.
@media (max-width: 768px) {
.sidebar-menu,
.desktop-ad-banner,
.full-width-header {
display: none;
}
}All three elements will vanish on screens 768px wide or smaller. You can add more selectors to the list as needed.
Step 5: Hide content based on screen width ranges
Use different breakpoints to hide content on very small screens like phones. Change the max-width value to 480px for smaller devices. This allows you to hide content on phones but keep it on tablets.
@media (max-width: 480px) {
.large-table {
display: none;
}
}This rule applies only to screens 480px wide or smaller. The table will remain visible on tablets but disappear on phones.
Step 6: Hide content using min-width for mobile-first
Write mobile-first CSS by hiding content on larger screens using min-width. This approach is common in modern responsive design. Start with base styles for mobile, then add media queries for larger screens.
/* Base styles for mobile */
.sidebar {
display: none;
}
/* Show sidebar on larger screens */
@media (min-width: 769px) {
.sidebar {
display: block;
}
}The sidebar is hidden on all screens by default. It becomes visible only when the screen is wider than 768px.
Verify the installation
Open your HTML file in a browser and resize the window to simulate mobile sizes. Check that the hidden elements disappear at the specified breakpoints. Use browser DevTools to inspect the computed styles and confirm the display property is set to none.
Expected output in browser DevTools:
Computed style for .desktop-only-content:
display: none
visibility: hidden
opacity: 1 (optional, but display:none is key)Troubleshooting
Content still visible on mobile.
Error: The media query is not applying.
Fix: Ensure the viewport meta tag is present in the
<head>. Check that the CSS file is linked correctly and the media query syntax matches@media (max-width: 768px)exactly.
Elements hidden but space remains.
Error: The layout does not collapse when content is hidden.
Fix: Use
display: noneinstead ofvisibility: hiddenoropacity: 0. Onlydisplay: noneremoves the element from the document flow and frees up space.
Media query not working on iOS Safari.
Error: Styles apply inconsistently on iPhone.
Fix: Ensure the viewport meta tag includes
width=device-width. Some older iOS versions ignore media queries without this tag. Update the tag to<meta name="viewport" content="width=device-width, initial-scale=1.0">.
Selectors not matching elements.
Error: The hidden element does not match the CSS selector.
Fix: Check the class or ID name in the HTML against the CSS selector. Ensure there are no typos or extra spaces. Use the browser inspector to verify the exact class name.
External stylesheet not loading.
Error: The CSS file returns 404 or does not load.
Fix: Verify the
<link>tag in the HTML points to the correct file path. Check for syntax errors in the CSS file that might prevent it from loading. Clear the browser cache and reload the page.