How to show element only on mobile css

CssHow-ToBeginner · 3 min read

How to Show Element Only on Mobile Using CSS

Use a CSS media query targeting mobile screen sizes to set the element's display property to block (or visible) on mobile and none on larger screens. For example, use @media (max-width: 600px) { .mobile-only { display: block; } } and hide it outside this range.

📐

Syntax

A CSS media query checks the screen size and applies styles only when conditions match. Use @media (max-width: 600px) to target screens 600 pixels wide or smaller, typical for mobile devices.

Inside the media query, set the element's display to block (or another visible value) to show it on mobile, and outside the query, set display: none; to hide it on larger screens.

css

.mobile-only {
  display: none;
}

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

💻

Example

This example shows a paragraph visible only on mobile screens (600px wide or less). Resize your browser window to see it appear and disappear.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Element Only on Mobile</title>
<style>
  .mobile-only {
    display: none;
    background-color: #d0f0c0;
    padding: 10px;
    border: 1px solid #4CAF50;
    font-family: Arial, sans-serif;
    margin: 20px;
  }

  @media (max-width: 600px) {
    .mobile-only {
      display: block;
    }
  }
</style>
</head>
<body>

<p class="mobile-only">This text is visible only on mobile screens (600px wide or less).</p>

</body>
</html>

Output

A green-bordered box with the text "This text is visible only on mobile screens (600px wide or less)." visible only when the browser width is 600px or less.

⚠️

Common Pitfalls

Not setting display: none; outside the media query causes the element to always show.
Using min-width instead of max-width targets larger screens, not mobiles.
Forgetting the viewport meta tag in HTML can make media queries behave unexpectedly on mobile devices.

css

.mobile-only {
  /* Wrong: element always visible because no display:none */
}

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

/* Correct way */
.mobile-only {
  display: none;
}

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

📊

Quick Reference

Use this cheat sheet to remember how to show elements only on mobile:

Action	CSS Code Example	Description
Hide element by default	.mobile-only { display: none; }	Element is hidden on all screen sizes initially.
Show on mobile	@media (max-width: 600px) { .mobile-only { display: block; } }	Element becomes visible on screens 600px wide or less.
Set viewport meta tag		Ensures media queries work correctly on mobile devices.

✅

Key Takeaways

Use CSS media queries with max-width to target mobile screen sizes.

Set display:none outside the media query and display:block inside it to show elements only on mobile.

Always include the viewport meta tag in your HTML for proper mobile scaling.

Test by resizing your browser or using device emulation in browser DevTools.

Avoid confusing min-width with max-width when targeting mobile devices.