How to hide element on mobile css

CssHow-ToBeginner · 3 min read

How to Hide Element on Mobile Using CSS | Simple Guide

Use a CSS media query targeting mobile screen sizes and set the element's display property to none. For example, inside @media (max-width: 600px) { .element { display: none; } }, the element will be hidden on screens 600px wide or smaller.

📐

Syntax

The basic syntax uses a @media rule to apply styles only on certain screen sizes. Inside the media query, set the element's display property to none to hide it.

@media (max-width: 600px): Targets screens 600 pixels wide or less (common mobile size).
.element: The CSS selector for the element you want to hide.
display: none;: Hides the element completely from the page layout.

css

@media (max-width: 600px) {
  .element {
    display: none;
  }
}

💻

Example

This example shows a paragraph that is visible on desktop but hidden on mobile screens 600px wide or less.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hide Element on Mobile Example</title>
<style>
  .hide-on-mobile {
    background-color: lightblue;
    padding: 1rem;
    font-size: 1.2rem;
  }
  @media (max-width: 600px) {
    .hide-on-mobile {
      display: none;
    }
  }
</style>
</head>
<body>
  <p class="hide-on-mobile">This paragraph is hidden on mobile devices (600px or less).</p>
  <p>This paragraph is always visible.</p>
</body>
</html>

Output

A webpage with two paragraphs: the first is visible on desktop but disappears on narrow screens; the second is always visible.

⚠️

Common Pitfalls

Common mistakes when hiding elements on mobile include:

Using visibility: hidden; instead of display: none;. The element stays in the layout space but is invisible.
Not setting the viewport meta tag, so media queries don’t work as expected on mobile browsers.
Using fixed pixel widths that don’t match actual device sizes.
Forgetting to test on real devices or browser DevTools mobile view.

css

@media (max-width: 600px) {
  /* Wrong: element is invisible but still takes space */
  .wrong-hide {
    visibility: hidden;
  }
  /* Right: element is removed from layout */
  .right-hide {
    display: none;
  }
}

📊

Quick Reference

Property	Effect	Use for hiding on mobile?
display: none;	Removes element from layout and hides it	Yes
visibility: hidden;	Hides element but keeps space	No
opacity: 0;	Makes element transparent but clickable and space remains	No
position: absolute; left: -9999px;	Moves element off-screen	Rarely, not recommended

✅

Key Takeaways

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

Set display: none to completely hide elements on mobile devices.

Always include the viewport meta tag for media queries to work correctly.

Avoid visibility: hidden as it leaves empty space where the element was.

Test your CSS changes on real devices or browser mobile simulators.