Trouble with my Portfolio Project

Code Feedback
1

Good morning, everyone! I’m working on my portfolio site for the Camp project, but I’ve run into a couple of issues.

Here is a link to the codepen: https://codepen.io/devrails/pen/EQdppp?editors=1100

I’m working with the HTML, CSS, and JavaScript of a site I’d started building before I joined freeCodeCamp; however, when I transferred it over to codepen one of the elements started behaving wierdly. It’s the “My Skills” section of the site, which should show a list of “skill bars” like is shown on the non-codepen version of the site here: www.devrails.net
However, codepen is trying to display it all on one line.

The second issue is that there seems to be a column of extra spacing on the right side. I’ve been looking at all of the elements with padding, including the overlays, to see if that’s the issue, but I can’t find the source of it. Does anyone know what’s causing this issue.

Sorry for the long post, and a HUGE “Thank you!!” to anyone who can help me solve either of these issues!

2
  • In your “Pen settings” > Css you added Bootstrap 4:

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css

  • Bootstrap 4 has a class “.progress”:

https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css

Line 5260 to 5269:

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.75rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
}

  • The class “progress” (Bootstrap 4) add rules that change the presentation of the page “trying to display it all on one line.” (display: flex and height:1 rem)

  • If you remove Bootstrap 4 from the project the skill bars looks like the non CodePen version.

Cheers and happy coding :slightly_smiling_face:

3

Ah!! I thought I had removed bootstrap, but I missed it. You are a hero!

Thank you SO much!!! :smile::+1:

4

You’re welcome :smiley:

Cheers and happy coding :slightly_smiling_face: