Why, there is Different output on codepen.io and vs code

I recently created my tribute page. I wrote code in Vs code and it was good. But when I copied that code and paste it on codepen.io, output was very different like image was much bigger than original size and font size too.

1 Like

Hey there @r.zoo!

No there is no difference (at least there should not be) in the output between CodePen and VS code. I used the same trick developing the pages in VS code and then copying and pasting the code into CodePen to share for feedback.

However, I know what you’re talking about, Codepen pushes the web page to the side because the code panels are on the side or the top, when testing the file in VS code you have the entire web page to your disposal. Here’s a fix.

  • First and foremost, make sure your page is responsive using media queries and %values.

  • Second try going to the menu bar and selecting “full page view” This will help you to visualize the page as a whole but remember if your website looks good whilst compressed in CodePen that’s a sign you did a Good job making it responsive.


Hope this helped!
Best, Cy499_Studios

1 Like

There also may just be a difference in the zoom at which it starts.

Codepen also puts everything in an iframe, which causes all kinds of small differences. Usually just in JS behavior, but I’ve seen plenty of visual differences, probably due to the way codepen also generates the boilerplate html if you don’t provide it.

Basically I’d chalk it up to the age of codepen, and say use codesandbox instead. Aside from having an editor that’s leagues better (it more or less is VSCode), it has a true full-screen mode that opens your page and just your page in a new window

Hi @r.zoo!

Welcome to the forum!

I used codepen for the responsive design projects and tried using it for the front end projects but didn’t like it as much. So I switched over to code sandbox and I love it.

I agree with @chuckadams’s suggestion.

Trust me, you will see the difference.