Pretty weird stuff. I’m working on my portfolio page locally in brackets. When I copy and paste the markup and related CSS into codepen things looks different (e.g., container not going full width, padding and margins need to be adjusted, etc.)
I’m a newb to coding in general so not sure if there’s some fundamental concept I’m missing or if codepen isn’t geehawing with my code. Either way it’s not inspiring a lot of confidence in my that I can write code and port it over to different editors and browsers and get the consistent results.
1 Like
I don’t know, post a link to the codepen so we can see it?
It’s minor but my codepen version has some padding or margin on the left that isn’t present in brackets. I also had to tweak the position of the landing logo and slogan for codepen.
Speaking of, and perhaps I need to start a new thread as to not derail, I’m having a hell of a time getting my logo and slogan to overlay over the horizontal center of my background image and STILL be responsive. When I scale my browser the logo and slogan don’t align themselves properly. I initially tired using CSS to add the background image along with a “min height” to force the full size image. I may try that route again after I seemed to have fixed my class positions (i.e., relative & absolute).
I don’t know if it’s the cause of all your site’s problems, but you’ll need to add jQuery and Bootstrap the CodePen way rather than in the HTML, as you would when hosting locally. I noticed that the console is complaining about “$” being undefined, which could be causing problems for Bootstrap as it depends on jQuery. Once you get those sorted, it will at least make the problem easier to diagnose.
1 Like
It’s looking good so far. I completely understand how frustrating it can be to smooth out those last few kinks. I copied and pasted it into my own brackets and noticed a few things…
1.) You don’t need closing tags for images. Brackets was showing errors with the div tags because of the closing img tags.
2.) You might try adding the background for that section as an actual CSS background image for the containing div instead of an image inside the HTML. You should be able to give the div the height and width of the viewport or just pick a height that looks right and set the width to 100% or 100vw and set the background to contain or cover.
I’m a relative newbie to CSS3, too, so don’t take my advice as gospel. 
Don’t forget when adding the JS on Codepen for Bootstrap, you need to add jQuery first before adding in Bootstrap’s JS. Also, for whatever reason, the jQuery and Bootstrap’s JS switch places when you leave the page. I contacted Codepen about this, they thought it was weird, but said they were looking into it if I remember correctly.
But yes, as @PortableStick said, you have to add Bootstrap on Codepen using Codepen’s methods.
Yeah, I think the majority of the issues are that you are trying to CDN your external resources rather than including them through the CodePen UI.
Do that first, then figure out the rest of the kinks.
1 Like