Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Code no longer works when exported from Codepen.io?

Hi, I'm sorry in advance if this is a really stupid question...

I wrote the following snippet on codepen: http://cdpn.io/GsHkj

While everything falls apart when you resize the window, it does display properly at greater widths in the preview window. If I share the snippet it displays fine across multiple browsers. I decided that I wanted to export the code from Codepen and continue writing it locally (in Coda 2), but in Coda the layout no longer works:


Why does it not work even though the code on codepen and locally are ostensibly exactly the same?

Bonus question: Why can't I choose Chrome when selecting a User Agent for the preview in Coda?

Thanks guys

2 Answers

Jacob Miller
Jacob Miller
12,466 Points

Did you add back in a link to your stylesheet, the DOCTYPE, and the <meta charset="utf-8"> tag?

Hi Jacob, thanks for the reply!

I figured it out. For the benefit of others who might(?) have the same problem in the future, it turns out Codepen was set to use autoprefixer which was adding vendor prefixes for my flex properties as they're not fully supported. The exported files obviously weren't being automatically prefixed, so it wasn't working outside Codepen. I've converted the files to scss and am compiling them with CodeKit now which also has a facility to automatically prefix css. It works!


James Barnett
James Barnett
39,199 Points

That almost seems like a bug. If you use codepen's export to gist / zip feature I'd expect the export to contain all of the linked resources.

Had the same issue except that because the script wasn't very complex, I instead of going the scss route just previewed in a full page and grabbed the necessary compiled resources by using 'Inspect Element' . We say 'Potomatoes'.