Question about atom and codepen

Hello everyone.
I have a question.
Why is it when I make my project in atom and view the file in chrome it looks right, but when I pass the code in to codepen it looks like all my elements are misplaced?

Hi @MaxClef, can you give an example?
I code in Brackets and cut&paste the relevant parts into codepen and haven’t noticed any anomalies.

When using codepen. it only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
- The link to your font would go in the box labeled ‘Stuff for <head>’
Even if you copy everything from <html> to </html> and paste it into the HTML section codepen renders it correctly.
If the <style> </style> tags are included in the CSS section there could be issues.

Now codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link. Have you tried using those to see if there’s errors in your code?

there a lil box that says tidy up html or css it makes look right it in top right corner of each box in edit view

1 Like

It could possibly be a combination of how your Atom is handling tabs/indents, vs how codepen is doing so. Most editors allow the customization of tabs, I usually set my editor to tab == two spaces. Largely a matter of personal preference, but if your editor is saving the tab as a tab (the actual \t character) vs spaces, that could be your culprit.

If you are talking about the output, and not the code style @MaxClef, remember that in codepen you need to manually add any external file in settings.

So for instance if you have some src tag pointing to an external script, it will work in a regular Chrome tab, but fail in Codepen since it runs in sandbox mode.

Hope this helps :+1:

1 Like

thank you for the help back… I still had to readjust the margins when I moved the code out of atom to pen. i was just wandering why this happened.