Problems transferring code to codepen

1

Hello,

I like to work with a text editor on my pc and check the html file locally in my browser, and than transfer it to codepen for the projects. This worked fine with my tribute page but when doing so with my survey form, the background image doesnt load and i get white borders around my page. With my product landing page everything inside my header div is out of order. Text is also looking inconsistent to what i see when i check it locally.

Does anyone else run into these kind of problems or can someone tell me why this happens?


2

A few things I noticed.

Don’t put any HTML in the CSS pane. Remove the style tags.

Codepen handles things a bit differently. In the HTML pane, take out the html, title, head, meta tags and link tags. Click on the Gear icon and put those items in there. You only need to put to the code between the body tags in the HTML pane. If you export the code it will put that all in the right places.

Make sure you change the name of the pen.

Finally this:

body {
    line-height: 1;
}

That’s squishing all your text together.

do those things and it will work.

4

Apologies for my late reply, I had to take a break due to circumstances.

Thanks alot for the advice, it worked.