Temporarily Remove Content Using Comments (Detailed)

Sometimes you might want to hide a section of your site without permanently deleting it. You can do this by commenting it out — which tells the site to ignore that piece of code.

Want the quick version instead? Check out this shorter guide.

Examples for Commenting Something Out:

• To temporarily hide something you might want to bring back later
• To test changes without fully deleting your original code
• To keep notes in your code for yourself or your team

If You're Commenting Out HTML

To comment out HTML (like a button, an image, or a text section):

➔ Wrap it like this:

<!--
<p>This is my paragraph that I want to hide!</p>
-->

Anything inside the <!-- —-> will be ignored by the site.

HTML Example

For this example, we’ll comment out the Beginner Favorites dropdown menu in the navigation.

Line before:

<a class="dropdown-item" href="/replays?event_category_id=atelier-beginner-favorites">Beginner Favorites</a>

After commenting out:

<!--
<a class="dropdown-item" href="/replays?event_category_id=atelier-beginner-favorites">Beginner Favorites</a>
-->

Once you Save, it should no longer appear on your site!

Whenever you’re ready to make it live again, just remove the comments!

If You're Commenting Out CSS

To comment out CSS (like styling for colors, spacing, or fonts):

➔ Wrap it like this:

/*
.card {
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
*/

Anything inside the /* */ will be ignored by the site.

CSS Example

This example shows how to comment out both a note and a specific style in your code. Below is what it looks like before commenting the style out. You’ll also notice there’s already a commented-out line labeled Main Header — that’s simply a note for the developer and doesn’t affect how the site looks.

/* Main Header */
.main-header{
  text-transform: uppercase;
}

For the public, it looks like this:

To comment this out, your CSS will look something like:

/* Main Header */
/* .main-header{
  text-transform: uppercase;
} */

The changes you made can be brought back at any time. In this example, with the CSS commented out, the header now displays like this:

Pro-Tips

• Make sure you have both the open and closing symbols included (dependent on HTML or CSS).
  • CSS: /* */
  • HTML:<!-- —->
• If you want to bring the code back, just delete the comment symbols!
• If you accidentally comment out too much, use Undo (⌘+Z or Ctrl+Z) to go back.