I’ve just finished working on the portfolio website in sublime text and and it looks fine when I view it in Chrome. I copy pasted the whole part of it into HTML window in code pen, copied my custom css and added bootstrap and font awesome but there are several issues with the site as viewed on code pen:
Nav bar: “about”,“portfolio” and “contact” should be next to one another on the right hand side whereas in CP they are stacked under one another on the left.
Also: on small screens only a pancake button is supposed to be visible whereas CP shows both the button and the three menu items.
Jumbotron: “About” heading, lorem ipsum text (placeholder text for “about me” text that would be there one day) and “my” photo have the class of jumbotron and look accordingly when viewed from ST (so heading on top, text underneath on left and photo next to it on the right) but for some reason CP shows it with text on top, photo underneath on left and “portfolio” heading on the right (god knows what happened to the “about” heading, I guess it’s buried under the nav bar).
Thumbnail gallery with 4 placeholder photos for my future websites: 4 photos should be presented in 2 rows of 2 but CP shows them in three rows 1+2+1.
This is my pen (it’s just full of placeholders and the last movie I’ve watched with my sis was the inspiration for the photos but I only intended it as an exercise in bootstrap ;)).
Would good soul here be kind enough to find the bugs in the code and explain why there is such a big difference between ST and CP?
In pen settings, in html tab remove links to bootstrap and font awsome(you are adding them in css tab in a correct version). In javascript tab, remove link to jquery, click quick add and add jquery lib before bootstrap.
Now, your navbar doesn’t conform to bootstrap documentation. Take a look at button and div enveloping ul, you are missing few classes, and id of a div needs to be equal to the button data target. Check the bootstrap v3 documentation.
That should bring you on to the right track, if you have any other problems or would like me to fork your pen, give me a shout.
Hi Adrian, thanks a lot for your help. I’m snowed under work in the office until Thursday, so won’t be able to work on my pen until then but I really appreciate your prompt reply. Do you have any idea why the website displays properly in the browser when I view it from sublime text? The code is the same, so I don’t really understand why Chrome interprets it differently than code pen. I wrote the site in ST because it’s more convenient and I thought it was more real-life than code pen, but I’m not so sure any more. Have you had similar experiences by any chance?
Having not see your full code as it was in ST it’s difficult for me to say for certain. The main thing was that link tags from HTML tab pointed to bootstrap 4 version and one you added in css section to bootstrap4 which caused clash.
After changing that the page display correctly but hamburger button wasn’t working, which, I believe, was due to outdated jQuery.
If you’d like to link your full code, as it was in sublime, I would be able to give you more precise answer.
Hi Adrian, I’ve removed the links to bootstrap and font awesome from header (and kept them in css settings) and added “collapse navbar-collapse” classes the div in question and everything seems to be working fine now. Thanks a lot for your help, I really appreciate it :).