CodeBlanks Logo Icon CodeBlanks
Login Register

Hiding and showing

CSS course · Intermediate · Lesson 55/98

Learn to hide elements responsively with display: none.

Hiding elements with display: none

The display: none declaration removes an element from the page layout entirely. It takes no space, is not seen by accessibility tools, and can't be clicked. Combine it with a media query to show elements only on narrow or wide screens.

This is the most common hiding method in responsive design. It's ideal for hiding a side menu on mobile, or the hamburger button that only makes sense on mobile, on the desktop view.

Hiding on narrow screens

To hide an element on narrow screens, write display: none in the base styles and bring it back with display: block inside an @media (min-width: 768px) block. This matches the mobile-first approach: less HTML shows on mobile, more items open up on desktop.

For example, a magazine side menu can stay hidden on mobile and open on desktop.

Show on mobile, hide on desktop

The reverse is also common: a hamburger menu button should appear only on narrow screens. Write .menu-toggle { display: block; } in the base styles and display: none inside @media (min-width: 768px).

The button shows on mobile and takes no space on desktop. In a mobile-first layout the base value always reflects the mobile view.

Exercise Show the menu button only on desktop

In a mobile-first layout, the .menu-toggle button should stay hidden on mobile and come back at 768 pixels and up. Write display: none in the base styles and display: block inside an @media (min-width: 768px) block.

Show example solution 
.menu-toggle {
  display: none;
}

@media (min-width: 768px) {
  .menu-toggle {
    display: block;
  }
}

Test yourself

  1. What is the difference between display: none and visibility: hidden?

    .a { display: none; }
.b { visibility: hidden; }
    • They are the same
    • visibility is faster
    • display takes no space, visibility keeps space
    • display only works for print
    Show answer

    display takes no space, visibility keeps space — Correct. display: none removes the element; visibility: hidden keeps its space but makes it invisible.

  2. Hide the side menu on mobile

    .sidebar {
  display: ____;
}

@media (min-width: 768px) {
  .sidebar { display: block; }
}
    Show answer 
    .sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sidebar { display: block; }
}

  3. Match each scenario to the right declaration

    Hide on narrow screen
    display: none
    Show on wide screen
    display: block
    Print only
    @media print
    Keep space, invisible
    visibility: hidden

All lessons in Intermediate

1 Flexbox basics

  1. What is a flex container?
  2. Flex-direction
  3. Justify-content
  4. Align-items
  5. Flex-wrap
  6. Summary - Horizontal menu

2 Advanced flexbox

  1. Flex-grow
  2. Flex shorthand
  3. Order
  4. Align-self
  5. Gap
  6. Summary - Card grid

3 Pseudo-classes

  1. :hover and :focus
  2. :nth-child
  3. :not and :is
  4. :first-child and :last-child
  5. :checked and :disabled
  6. Summary - Interactive list

4 Pseudo-elements

  1. ::before and ::after
  2. Content property
  3. ::first-letter and ::first-line
  4. ::selection
  5. ::placeholder
  6. Summary - Decorative heading

5 Advanced selectors

  1. Sibling combinators (+ and ~)
  2. Attribute selector patterns
  3. :where and :has
  4. Summary - Breadcrumb menu

6 Project: Landing page

  1. Project: Landing page
  2. Hero section
  3. Feature list
  4. Pricing cards
  5. Project final - Landing page

7 Grid basics

  1. What is a grid container?
  2. Grid-template-columns
  3. Grid-template-rows
  4. Grid gap
  5. Repeat function
  6. Summary - Photo gallery

8 Advanced grid

  1. Grid-column
  2. Grid-row
  3. Grid-template-areas
  4. Grid-area
  5. Minmax function
  6. Summary - Magazine layout

9 Responsive design basics

  1. Viewport meta
  2. Media query basics
  3. Breakpoints
  4. Responsive typography
  5. Responsive images
  6. Summary - Responsive card

10 Responsive layout

  1. Mobile-first approach
  2. Responsive grid layout
  3. Responsive flex layout
  4. Hiding and showing
  5. Print styles
  6. Summary - Multi-column page

11 Transitions

  1. What is a transition?
  2. Transition-property
  3. Transition-duration
  4. Timing function
  5. Transition-delay
  6. Summary - Hover effects

12 Transforms

  1. What is a transform?
  2. Translate
  3. Rotate
  4. Scale
  5. Skew
  6. Summary - Interactive card

13 CSS variables

  1. What are CSS variables?
  2. Defining variables
  3. Var() function
  4. Variable fallback
  5. Theme switching
  6. Summary - Design system

14 Form styling

  1. Input styles
  2. Label and placeholder
  3. Focus states
  4. Button styles
  5. Checkbox and radio
  6. Summary - Registration form

15 Table styling

  1. Table skeleton
  2. Border-collapse
  3. Header cells
  4. Zebra stripes
  5. Hover row
  6. Summary - Data table

16 SVG styling

  1. What is SVG?
  2. Fill and stroke
  3. SVG hover effects
  4. CurrentColor
  5. SVG icons
  6. Summary - Icon set

17 Intermediate final

  1. Challenge - Flexbox gallery
  2. Challenge - Grid magazine
  3. Challenge - Responsive navbar
  4. Challenge - Form and table
  5. Challenge - Intermediate capstone