Get rid of CodePen Demo

1

Hello,

I am having trouble getting rid of the code on the top of a page that I am creating in CodePen. I have seen this code demo portion before, but it usually disappears after I type some HTML to fill in the area.

I have also had where the code stays for most of the progect, but it usually goes away by the end of the project at some random time while I am typing some other code, usually CSS I think.

Does anybody know why the demo code sticks around and why / how it disappears? I tried looking on CodePen and Google but I haven’t seen an answer or a solution to the problem.

2

I’m not sure what you’re talking about. Can you share your pen and point out what you are trying to remove?

3

https://codepen.io/letsfundthee/pen/RwrPZzr

It’s at the very top and in white right now, but I’ll change that for this question

4

first, CodePen is a boilerplate, it expects only the content of the body element to go inside the HTML box, and the content of the style element to go in the CSS box
this is the usual schema, you have some errors that can cause that code to appear there

<!DOCTYPE html>
<html>
   <head> <!-- metadatas, this stuff goes in the Pen settings --> </head>
   <body>
       <style> <!-- your CSS goes in the CSS box --> </style>
      <!-- your HTML box content here -->
      <!-- JAVASCRIPT box, or if you have script tags, those can go in the pen settings or as last thing in the HTML box -->
   </body>
</html>

please try to fix this stuff.

Also, the semantic element is header, the head is for metadatas and stuff liek that

if it is not that, there may be something going weird with codepen itself

5

It’s your universal selector that is doing it.

* {
  top: 0;
  left:0;
  display: grid;
  grid-template-rows: 5;
  grid-template-columns:7;
  color: black;
}

None of those style properties makes sense to have in a universal selector anyway.

6

@ilenia:

This isn’t the first time I used this type of format of “header” and “body”, but I did erase them and there was no change.

@lasjorg:

I got rid of the universal grid and it fixed the problem. I guess if I have a grid it should only be for 1 container, but I thought the grid command was supposed to initially be a global command, because in later lessons we learned how to create grids withing grids.

The Explanation of the Other Universal Sector:

  • The Top and Left codes were to make sure the edge of the screen wasn’t off centered.
  • The color code was only there for this problem, it was only to show you the code at the top