Browser html document works fine, codepen project doesn't. (exact same code)

Browser html document works fine, codepen project doesn't. (exact same code)
0

#1

Hi all,

I recently submitted my ‘build a personal portfolio webpage’ project, and I discovered that on Codepen, the result is really messed up. (I was previously working on it just on notepad++ then uploaded the code to Codepen) Using the exact same code, when I viewed it on google chrome and when I viewed it on Codepen were drastically different. If you go to the link for my portfolio it looks really bad. It would be of great help if someone could explain this.


project link (garbage)

Thanks, jccofresh

*below is all the code i used on notepad++, if you copy paste onto your text editor and create a ccs and html file and then view the Chrome html document(or whichever browser) it should work. But the different desktops/broswers/computer formats might screw everything up…idk

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Web Portfolio: Joseph Chiang</title>
      <link type="text/css" rel="stylesheet" href="style.css" media="screen">
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
   <body>
      <nav class="navbar">
         <div class="navbar">
            <a class="hover" href="#contact">Contact</a>
            <a class="hover" href="#portfolio">Portfolio</a>
            <a class="hover" href="#about">About</a>
            <p>Web Portfolio</p>
         </div>
      </nav>
      <div class="section1">
         <div class="box" id="about">
            I am a young coder with some experience in Javascript, Html, and CSS. I love learning useful and applicable things. I have a passion for coding and in the future I hope to have a job in related to Computer Science.
         </div>
      </div>
      <div class="section2">
         <h2 id="portfolio">Portfolio</h2>
         <img class="pic" src="https://assets.awwwards.com/awards/images/2012/02/allsizes_remake_21.jpg" alt="placeholder website">
         <img src="http://graphicdesignjunction.com/wp-content/uploads/2014/01/flat-website-design-28.jpg" alt="placeholder website">
         <div><a href=# class="left hovers soft-link">placeholder</a><a href=# class="right hovers soft-link">placeholder</a></div>
         <img class="pic" src="https://assets.awwwards.com/awards/images/2012/02/allsizes_remake_15.jpg" alt="placeholder website">
         <img src="http://graphicdesignjunction.com/wp-content/uploads/2014/10/responsive+websites+designs+001.jpg" alt="placeholder website">
         <div><a href=# class="left hovers soft-link">placeholder</a><a href=# class="right hovers soft-link">placeholder</a></div>
      </div>
      <div class="section3">
         <h2 id="contact">Contact</h2>
         <form action="index.html">
            Name
            <br />
            <label>
            <input type="text" class="label">
            </label>
            <br />
            <br /> Email Address
            <br />
            <label>
            <input class="label" type="text">
            </label>
            <br />
            <br /> Message
            <br />
            <br />
            <textarea name="styled-textarea" cols="5" rows="80" id="style" onfocus="this.value=''; setbg('#e5fff3');" onblur="setbg('white')">Comment here...</textarea>
            <br/>
            <div class="press">
               <button>Submit</button>
            </div>
         </form>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
             // Add smooth scrolling to all links
             $("a").on("click", function(event) {
                 // Make sure this.hash has a value before overriding default behavior
                 if (this.hash !== "") {
                     // Prevent default anchor click behavior
                     event.preventDefault();
         
                     // Store hash
                     var hash = this.hash;
         
                     // Using jQuery's animate() method to add smooth page scroll
                     // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
                     $("html, body").animate({
                             scrollTop: $(hash).offset().top
                         },
                         800,
                         function() {
                             // Add hash (#) to URL when done scrolling (default click behavior)
                             window.location.hash = hash;
                         }
                     );
                 } // End if
             });
         });
      </script>
      <div class="center">
         <a target='_blank' href="https://twitter.com/?lang=en" class="fa fa-twitter"></a>
         <a target='_blank' href="https://www.facebook.com/" class="fa fa-facebook-official"></a>
         <a target='_blank' href="https://www.instagram.com/" class="fa fa-instagram"></a>
         <a target='_blank' href="https://www.linkedin.com/" class="fa fa-linkedin"></a>
      </div>
   </body>
</html>
@import url('https://fonts.googleapis.com/css?family=Oxygen');
@import url('https://fonts.googleapis.com/css?family=Cinzel');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    font-size: 2em;
    font-weight: normal;
    font-family: Oxygen, Helvetica, Sans-serif;
    text-align: left;
    margin: 0 auto;
}
.left {
    font-style: italic;
    display: inline;
    margin-left: 9.1em;
    color: black;
    text-decoration: none;
    background-color: white;
    margin-top: -3em;
}
.right {
    font-style: italic;
    display: inline;
    margin-right: 8em;
    margin-left: 12em;
    color: black;
    text-decoration: none;
}
h2 {
    color: #111;
    font-family: 'Open Sans', sans-serif;
    font-size: 3.01rem;
    margin: 2em;
    text-align: center;
    text-transform: uppercase;
}
.soft-link {
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    -ms-transition: color .5s linear;
    -o-transition: color .5s linear;
    transition: color .5s linear;
    color: #FF7043;
    text-decoration: none;
    background-color: white;
    padding: 0.8%;
}
.hovers:hover {
    color: white;
    background-color: #FF7043;
}
a {
    padding-top: 1em;
}
/* Add a black background color to the top navigation */

.navbar {
    background-color: #333;
    overflow: hidden;
    border-bottom: 0.1rem solid white;
}
/* Style the links inside the navigation bar */

.navbar a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 0.7em 0.4em 0.3em;
    text-decoration: none;
    font-size: 1em;
    height: 1.75em;
}
/* Change the color of links on hover */

.hover:hover {
    background-color: #ddd;
    color: black;
    text-decoration: none;
    -webkit-transition: color .3s linear;
    -moz-transition: color .3s linear;
    -ms-transition: color .3s linear;
    -o-transition: color .3s linear;
    transition: color .3s linear;
}
/* Add a color to the active/current link */

.navbar a:active {
    background-color: #333;
    color: white;
}
p {
    color: #01A8B2;
    font-size: 1.2em;
    margin-left: 0.3em;
    margin-bottom: 0.3em;
    margin-top: 0.45em;
}
.box {
    padding: 1.5em 3em 2em 3em;
    width: 70%;
    font-size: 1.4rem;
}
img {
    width: 37%;
    height: 32%;
    margin: 1em 2em 1em 1em;
}
.pic {
    width: 37%;
    height: 32%;
    margin: 1em 1em 1em 4.5em;
}
form {
    color: black;
    margin-left: 1em;
}
.fa {
    padding: 1.1% 0.9% 1%;
    margin-bottom: 0.6em;
    margin-top: 0.6em;
    width: 3.1%;
    height: 5.2%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 50%;
}
.fa-facebook-official {
    background: white;
    color: #003958;
}
.fa-facebook-official:hover {
    background-color: #003958;
    color: white;
    text-decoration: none;
    -webkit-transition: color .4s linear;
    -moz-transition: color .4s linear;
    -ms-transition: color .4s linear;
    -o-transition: color .4s linear;
    transition: color .4s linear;
}
.fa-twitter {
    background: white;
    color: #00A2E8;
}
.fa-twitter:hover {
    background-color: #00A2E8;
    color: white;
    text-decoration: none;
    -webkit-transition: color .4s linear;
    -moz-transition: color .4s linear;
    -ms-transition: color .4s linear;
    -o-transition: color .4s linear;
    transition: color .4s linear;
}
.fa-instagram {
    background: white;
    color: #833ab4;
}
.fa-instagram:hover {
    background: linear-gradient(to bottom right, #833ab4, #fd1d1d, #fcb045);
    color: white;
    text-decoration: none;
    -webkit-transition: color .4s linear;
    -moz-transition: color .4s linear;
    -ms-transition: color .4s linear;
    -o-transition: color .4s linear;
    transition: color .4s linear;
}
.fa-linkedin {
    background: white;
    color: #006AA4;
}
.fa-linkedin:hover {
    background-color: #006AA4;
    color: white;
    text-decoration: none;
    -webkit-transition: color .4s linear;
    -moz-transition: color .4s linear;
    -ms-transition: color .4s linear;
    -o-transition: color .4s linear;
    transition: color .4s linear;
}
.center {
    text-align: center;
    background-color: #A1C0CB;
}
.press button {
    color: #fff;
    background-color: #6496c8;
    border: none;
    border-radius: 1.5em;
    box-shadow: 0 0.8em #27496d;
    margin-top: 1.5em;
    margin-left: 47.8em;
    height: 4em;
    width: 8em;
}
.press button:hover {
    background-color: #417cb8
}
.press button:active {
    background-color: #417cb8;
    box-shadow: 0 0.4em #27496d;
    transform: translateY(0.5em);
}
.label {
    height: 1.3em;
    width: 30%;
    border: 0.2rem solid #cccccc;
    padding: 0.5em;
}
.ph {
    display: inline;
}
textarea {
    width: 55%;
    height: 9em;
    border: 0.2rem solid #cccccc;
    padding: 0.5em;
    font-family: Tahoma, sans-serif;
    color: black;
    margin-top: -2em;
}
form {
    font-size: 2rem;
}
.section1 {
    background: linear-gradient(to left, #dce35b, #45b649);
    color: black;
    height: 6em;
    margin-top: 0.1em;
}
.section2 {
    background: linear-gradient(to right, #dbe6f6, #c5796d);
    margin-top: -3.1em;
    margin-bottom: 2em;
    height: 39.3em;
}
.section3 {
    background: linear-gradient(to bottom, #73c8a9, #373b44);
    color: black;
    height: 23em;
    margin-top: -3.1em;
}

#2

This line above references a local file which Codepen can not access.

This line above has problem in the href=

There maybe some other errors, so make sure to check the console (Ctrl+Shft+I in Chrome).


#3

how would i change this

<link type=“text/css” rel=“stylesheet” href=“style.css” media=“screen”>

so that codepen can access it . Also i took out the other link.


#4

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#5

Ok thank you, however you said something about Codepen not being able to access the local file, do I need to change anything to that?


#6

Sorry about that, you need to copy and paste everything currently in your styles.cs file into the Codepen CSS section.


#7

I have the css code and html code in the proper files.
But the preview still looks awful, so I exported the file and when I viewed the Chrome Html document all the CSS was the way it should be and everything looked fine. (ive done this several times, notepad++ and codepen have the exact same code) Result is still different somehow. (as in preview on codepen vs. Chrome Html document)
Help!


#8

When I view your codepen, it looks fine to me. What kind of differences are you seeing? Can you post some screenshots of the “correct” version vs what you see on the Codepen version?


#9

The only thing I notice, is that you need to move your index.html and style.css files out of the PersonalPortfolio directory and into the root directory. But if I just view the index.html it looks fine and correctly accesses the style.css file.


#10

WOW
I just realized that i didnt have the preview dragged out fully so the result i saw was half the “correct” size and i thought that it looked awful cause it was all squished!


#11

So so sorry I got everything fixed and I just realized how stupid I was. Sorry for taking your time Randell and I appreciate the help.