CodePen Output Differs From Local Output

Question

I feel like this could be a possible issue with how CodePen interprets things. I am new to CSS, so, would appreciate any explanations.

I have code running on CodePen. https://codepen.io/jay-pancodu/pen/bGjdbry

The output looks like this.

Now, that code, I also run locally. that code is available here. https://github.com/Jay-study-nildana/StackOverDoubtsWeb/tree/main/CalculatorwithBootstrap

When this is run locally, I get an output like this.

All I did was create a new Pen, copy pasted the code from the local files to the online codepen editor.

Why would this happen? is this normal CodePen behavior that I should simply anticipate?

Further, The original code is available here, https://codepen.io/giana/pen/GJMBEv. That looks just fine, and oddly enough, when I copy paste this codepen code to run locally, the layout gets screw up again.

So, I am just confused. And, I am new to CSS.

Adding some lines of code, because, the editor won't let me post without some lines of code.Please ignore this below code snippet.

body {
  color: #181ce9;
  font: 300 18px/1.6 "Source Sans Pro", sans-serif;
  margin: 0;
  padding: 5em 0 2em;
  text-align: center;
}

Brianabby · Accepted Answer · 2022-12-22 07:46:35Z

2

I find that the normalize.css is the main reason why your CodePen won't work. Take note that CSS will make the last line for the main style. In CodePen CSS will always take the style on the top. And this normalize CSS is under the CSS Codepen style, different from your local that the normalize CSS is on top of your style.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

answered Dec 22, 2022 at 7:46

Brianabby

462 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cédric Over a year ago

Related : Overriding Bootstrap classes in CodePen site

Jay Over a year ago

Ah! I removed that line (in the linked codepen) and now, the layout is exactly as it is locally. Excellent.

Collectives™ on Stack Overflow

CodePen Output Differs From Local Output

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related