Took too long of a break...Help with my portfolio project?

Code Feedback
1

I’ve got lots of issues going on here and I am not sure where to even start.

1 - My font is suddenly not working

2 - I can’t get the projects to wrap.

3 - The project titles need to be styled…I want them to look like the project sample https://personal-portfolio.freecodecamp.rocks/

4 - My last section is all messed up and isn’t fixed. It seems to not be the proper width.

Any help on where to start to fix these issues, I’d love it!

2

I’m assuming you are trying to use the Poppins google font? If so, you need to select the variations you want and then include the link code it gives you in the head of your page.

1 Like
3

you can upload any font to your codepen since you have pro.
IDK why you have pro since you’re a beginner. waste of money, imo.

4

  1. You need to remove display: flex from the body selector to get the project grid to wrap.

  2. Not sure what you are asking here.

  3. Not sure what you mean.

BTW, you should use min-height for your sections. Otherwise, the content will just overflow when everything is stacked vertically and they need more space.

1 Like
5

Thanks! Those helped!

My issue now is that my projects are still overflowing if the page is smaller.

Personal Portfolio Webpage
Personal Portfolio Webpage1332×519 193 KB

6

image
image899×791 46.9 KB

Also, this is what it looks like when it is a smaller page…
I have looked through everything and googled and can’t see what is wrong.

7

is this a FCC challenge?

8

@mirandabecodes One suggestion that might help is that you try a “narrow-first” (or what some people call a “mobile-first”) approach to styling your page. Narrow your browser in as far as it will go and style the page so it looks good at that narrow width. There should be no overlapping of elements and no horizontal scroll bar. You won’t need to do a lot of fancy styling here because your block level elements will automatically stack on top of each other, creating a nice single column layout. This narrow styling will be your default CSS.

Then after you have the narrow page looking good you can widen your browser and make any adjustments you want using media queries and such. You may find that you have to add additional divs and such to help with the wider styling. Just make sure to always go back to ensure you didn’t mess up your narrow styling.

9

Yes, build a portfolio project from the Responsive Web Design course.

10

Yah, I still need to learn this. The FCC curriculum didn’t really teach it that way and I’m still so new.

11

Use min-height

The content takes up more space when stacked than what 100vh computes to. The section must be able to grow taller to fit the content when it is stacked.

12

Gah, I thought I did that…trying again!

13

Ok! It’s fixed!

Now the only thing that doesn’t adjust is the NavBar. I tried min-width there and tweaking a few other things, but no luck.

14

You are positioning the elements using large margins. Use flexbox to position the elements.

Example code

header {
  background-color: #8D7BBB;
  border-bottom: 8px solid #C6EBBE;
  display: flex;
  min-height: 60px;
  font-family: poppins, Geneva, Sans-Serif;
  font-size: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* removed */
  /* padding-left: 110px; */
  
  /* align to the end/right */
  justify-content: flex-end;
}


nav > ul {
  display: flex;
  
  /* center for the wrapping */
  justify-content: center;
  
  /* Wrapping is good defensive CSS but you can always
   * manually change the direction to a column in a media query
  */
  flex-wrap: wrap;
  
  /* use gap for spacing */
  gap: 6rem;
  
  /* removed */
  /* width: 30vw; */
  /* margin-left: 1100px; */
}
15

Awesome! Thank you so much. I really need to spend more time playing around and getting to know flexbox more.

To my eyes, it looks like the only thing that isn’t working properly now is that when I click down the page and then use the welcome link, it doesn’t go all the way to the top of the page, it’s only going mid way. I tried adding scroll-padding-top and it helped, but not fully.

16

Move the welcome class to the section element and then remove the parent wrapping div element that isn’t needed.

17

Yes! Thank you! That worked.

Any other feedback?

18

I would check your color contrasts. Some of them are not super accessible.

Other than that it looks pretty good.

There might be a little alignment work you can still do at the small screen sizes but at least it is properly responsive.

1 Like