How to Hide an Element in CSS

Use CSS hiding techniques when content should stay in the HTML but not remain visible in the layout. The best method depends on whether the element should disappear completely, keep its layout space, or only hide on certain screen sizes.

What you’ll build or solve

You’ll learn how to hide an element in CSS using the most common techniques. You’ll also know when to use display: none, visibility: hidden, and responsive hiding rules.

When this approach works best

This approach is the right choice when part of the UI should be temporarily hidden without deleting the HTML.

Common real-world scenarios include:

• Mobile-only navigation changes
• Hiding banners after dismissal
• Removing helper text on smaller screens
• Feature-flagged UI blocks
• Temporarily hiding test components

This is a bad idea when the content should remain accessible to screen readers or still be interactive in the page flow.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML and CSS knowledge

Step-by-step instructions

Step 1: Choose the right hiding method for the behavior you need

Use display: none when the element should disappear completely.

<div class="promo-banner">USA pricing launch</div>

<style>
  .promo-banner {
    display: none;
  }
</style>

Use visibility: hidden when the element should stay in the layout but not remain visible.

<div class="helper-text">France rollout details</div>

<style>
  .helper-text {
    visibility: hidden;
  }
</style>

For responsive hiding, combine it with a media query.

<div class="desktop-only">UK dashboard panel</div>

<style>
  @media (max-width: 768px) {
    .desktop-only {
      display: none;
    }
  }
</style>

What to look for:

• display: none removes the element from layout flow
• visibility: hidden keeps the layout space
• Media queries work best for screen-specific hiding
• Use the method that matches the layout behavior you want
• Avoid hiding important content users still need to access

Examples you can copy

Hide a promo banner

<div class="banner">USA spring launch</div>

<style>
  .banner {
    display: none;
  }
</style>

Hide helper text but keep spacing

<p class="note">France beta details</p>

<style>
  .note {
    visibility: hidden;
  }
</style>

Hide desktop block on mobile

<div class="desktop-panel">UK analytics</div>

<style>
  @media (max-width: 768px) {
    .desktop-panel {
      display: none;
    }
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using visibility: hidden when layout space should collapse

What the reader might do:

.banner {
  visibility: hidden;
}

Why it breaks: the empty space still stays in the layout.

Corrected approach:

.banner {
  display: none;
}

Mistake 2: Using display: none for screen-reader-only content

What the reader might do:

.helper-text {
  display: none;
}

Why it breaks: the content disappears completely for both visual users and assistive tools.

Corrected approach:

Use an accessibility-focused visually hidden utility class instead of removing it entirely.

Mistake 3: Forgetting breakpoint logic in responsive hiding

What the reader might do:

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

Why it breaks: the logic may hide the wrong version on the wrong screen.

Corrected approach:

Double-check whether the rule should target smaller or larger screens.

Troubleshooting

If empty space still remains, switch from visibility: hidden to display: none.

If the wrong version hides on mobile, recheck the media query breakpoint direction.

If the hidden element still affects screen readers, use an accessibility-specific utility pattern.

If layouts jump unexpectedly, confirm whether removing the element from flow is actually the right choice.

Quick recap

• Use display: none to fully remove an element
• Use visibility: hidden to keep layout space
• Use media queries for responsive hiding
• Match the hiding method to layout behavior
• Avoid hiding important accessible content the wrong way