Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.
The Details View is arguably the most “shareable” view of the Pens you create on CodePen. You are of course free to share whatever view you like, but the Details View offers a large preview, clearly shows you the author and the title/details of the Pen, as well as statics and social information. However there were a couple of little issues that occasionally made it no ideal:
- On desktop, the preview had a minimum width, so responsive Pens were hard to show off.
- Some Pens needed more or less preview height to show them off best.
Both of those things are fixed now.
Desktop view still has a minimum width (there is a specific mobile version for Details View), but the iframe will squish down narrower than that if needed.
To adjust the height of the preview, you can use the URL parameter
?preview_height=XXX. This will set the preview to that height in pixels. Example:
This can make all the difference when sharing a preview: