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
Exported codepen files (html and CSS) are not displaying properly in browser on my local machine, how do I solve this
Do you have a link to your pen?
<link> tags to the "Stuff that goes to
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
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
They look the same to me. Which elements specifically look different?
The nav section, jumbotron and the green section
Hmm, did you unzip the folder?
Yes I did, I am trying to see whether the issue might be because the CSS is in a sub folder
Are there any other changes you made?
I changed the
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.
I tried again but still not working on my local machine. I have a brand new Windows 10 pro 64-bit. I am puzzled
Any chance, you can try it on another computer or another browser? I don’t know any other reason why this could be happening.
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.
(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
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”>``
<link> for bootstrap should go before the one for your stylesheet. And the
<link> for your stylesheet shouldn’t be inside
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.