The Full Page view of your Pen puts the focus on the results of your hard work. The code editor panels disappear and your Pen is displayed with a minimal CodePen header.

From the header at the top, logged-in CodePen members can heart or fork your Pen. Or, use the “Change View” menu to switch to the Editor View to inspect the code, or the Details View to see your Pen’s description and leave a comment.

Logged-out visitors will not see the Love button.

Note that the preview is in an iframe (for security, see that section below). If you’re debugging, remember to change the context to the “CodePen iframe”. Or, try the Debug Mode, which has no header or iframe at all.

Accessing the Full Page View

You can access the Full Page view of any Pen from the “Change View” menu in the header. Select “Full Page View”.

Security

The Full Page View has a variety of safety mechanisms built in, including:

  • The preview is in an iframe, so code within the Pen cannot reach up to the parent page and do anything there.
  • The iframe is sandboxed (an HTML5 thing) for deeper protection on modern browsers.
  • CodePen strips known dangerous code, like form submissions and page redirects.

These security measures mean that Full Page View is not ideal for debugging your code. For debugging, try Debug Mode instead.

Viewport

The UI of our header looks and works best on small screen mobile devices when we use the viewport meta tag that tells the page to render at its natural width. We automatically insert this in the <head> of Full Page View:

<meta name="viewport" content="width=device-width, initial-scale=1">

That isn’t in your code by default though, so if you, for example, export your code from CodePen, or use Debug Mode and it looks different on your mobile device, that may be why. It’s very easy to explicitly add this to your code as well: Editor View > Settings > HTML Tab > Stuff for <head> > “Insert the most common viewport meta tag”

If you prefer not having that meta tag, and seeing the default zoomed-out that some mobile devices do, you can override the meta tag we insert with your own:

<meta name="viewport" content="width=auto">
On the left, Full Page View looking “normal” because we automatically insert the proper viewport meta tag. On the right, the default “zoomed out” look that you would see if we didn’t, or if you override it because you want that behavior.
Was this article helpful?
YesNo