Exported codepen files (html and CSS) are not displaying properly in browser on my local machine, how do I solve this

1

Hello, I exported my codepen files (html and CSS) to my local machine but the index page is not displaying properly. It appears as if the browser default styling have overridden the CSS styling file. Help please

2

Do you have a link to your pen?

3

Hello, yes. Please check the following: https://codepen.io/RDC2020/pen/ybWvBL

4

Move any <link> tags to the "Stuff that goes to <head>" section in the HTML settings. Move external javascript files to the JS settings.

5

You will need to use http:// instead of // for your bootstrap link. The // doesn’t work, because it means that the browser should use the same protocol as the document was served over. If you open the file from your computer, this protocol is file://. For the // to work, your document should be loaded over http or https.

1 Like
6

Thanks to you both. I have moved the <link> tags to<head>...</head> section and I have changed Bootstrap as follow but CSS is still overridden. Below is how it looks like

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

``

``
But it still not working properly, the CSS still not catching in for some reasons

7

They look the same to me. Which elements specifically look different?

8

The nav section, jumbotron and the green section

9

Hmm, did you unzip the folder?

10

Yes I did, I am trying to see whether the issue might be because the CSS is in a sub folder

11

Are there any other changes you made?

I changed the // to http:// (still in the body) in this pen.

If I Export > Export .zip, unzip the folder and open index.html, everything looks exactly the same as your pen.

12

I tried again but still not working on my local machine. I have a brand new Windows 10 pro 64-bit. I am puzzled

13

Any chance, you can try it on another computer or another browser? I don’t know any other reason why this could be happening.

14

KevComedia, you mentioned that I should move Javascript files to JS settings, could you please elaborate

15

It looks like you haven’t moved the <link> tag to the HTML settings. That’s a problem because when you export your pen, the HTML that you get is something like

<head>
  ...
  <link href="css/styles.css">
</head>

<body>
  <link href="url/to/bootstrap.css">
  ...
</body>

So your custom CSS is overridden by bootstrap, because it appears later in the HTML.

I don’t think the javascript would affect the styles, but I mentioned it too so you have a clean export.

(or you can eliminate the <link> tag entirely and move the bootstrap css url to the CSS settings)

and don’t forget the https: in front of the bootstrap url

16

This is how it looks like now

``

Mick's Motor Repairs``

<style><link rel="stylesheet" type="text/css" href="./stylesheet/style.css"></style>

<link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=“sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=“anonymous”>``

</head>

17

The <link> for bootstrap should go before the one for your stylesheet. And the <link> for your stylesheet shouldn’t be inside <style> tags.

1 Like
18

You are a star! Thank you very much. I have learned a lot, it all worked fine. I am now aware that when files are exported from codepen they have bootstrap tags inside the body tags which need to be moved into head section. Plus, the CSS file must be placed before bootstrap and not inclosed within style tags.

Awesome!