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!

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

Posted by Rory Matthews
Rory Matthews
2,287 Points

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:

screen

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
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?

Rory Matthews
Rory Matthews
2,287 Points

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!

Cheers

James Barnett
James Barnett
39,199 Points
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.

Jake Cooper
PLUS
Jake Cooper
Courses Plus Student 56,854 Points
Jake Cooper
Jake Cooper
Courses Plus Student 56,854 Points

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'.