Website/Portfolio - Centering Text at Bottom while keeping Portfolio/Project Grid in place

Hi - I am having trouble with something that seems like a pretty basic problem, but am struggling to figure it out.

In the screenshot. I am trying to have my project Icons (only one now) go from left to right in tiles, and have the text be on the center of the screen at the bottom, along with my contact info (Linkedin, Instagram, e-mail, Number) the way it looks on the example offered by Free Code Camp below.


https://codepen.io/freeCodeCamp/full/zNBOYG.

Thank you so much for any help.

It’s best to put your code in a pen (or an accessible site) so we can interact with it. I looked at the pen. I think your image is your goal. A single icon is left aligned like the beginning of a row. Copy it many times to prove that it’s in a row like you want. I think the text under your icon is fake project details. If it isn’t then put it in it’s proper place in the grid.

  1. Fill out a complete page with enough placeholding content to look finished.

  2. Put the code on a site or codepen.

  3. That way one has enough information to really help you. Otherwise we’re just guessing.

PS place holder images,

https://placekitten.com/

https://place-hold.it/

@JSpuc The User Stories and example are setting you up for what you want. User story #10 leads to a chunky section style by setting a height on a section when the content isn’t tall enough to create it (like the naturally tall project grid section).

Rows can be made with:

  • display: inline-block;

  • Flexbox

  • A grid track

  • And more!

The example uses all three to practice what was presented in the curriculum.

Lines like near the bottom can be made with a border.

Hi Thank you for your feedback. I’m pretty new to this so I apologize for the lack of clarity in my previous post.

My goal with this question:

1.) Have project Icons (in the project section moving from left to right) in a row. On the existing portfolio example from FreeCodeCamp, there are 6 projects (three columns, 2 Rows). I think I’d like just one row.

2.) Have the bottom of the page and contact information look similar to the portfolio Example shown by FreeCodeCamp.

This is Free Code Camps example:

https://codepen.io/freeCodeCamp/full/zNBOYG.

This is my current code:
https://codepen.io/j-rdan-skylark-spuck/pen/VJyxrq?editors=1111

Thank you.

Hi @JSpuc. You need to add a closing tag to <div class="projects-one">. Right now it’s wrapping around your contact content.

Any time you run into a display issue, try * {border: 1px solid red;} to put a red line around every element. It’s often all you’ll need to find the problem.

2 Likes

Thank you for the feedback! Your advice is certainly appreciated.

One more question I have that I have researched is why my hover feature won’t work on my project icon. I think my CSS is right to do this, but clearly I am missing something. My goal is to have the project icon fade to black and white and have the project text over the image like the attached photo.

My codepen link is:

Run-in%20JPEG%20copy

Thank you!

You are missing the class selector, you have a typo and you are using an invalid value for the opacity property

project-one:hover { 
  opacity:20%;
}

Should be:

.projects-one:hover { 
  opacity: 0.8;  /* I'm guessing that is what you want from 20% */
}

It’s OK to look and learn from the example code and I guess to some extent also “borrow”. But I would be careful copying too much code, it can end up being more trouble then it’s worth. You really need to make sure you know what the code is doing and make sure you actually need it.

You have a lot of errors in both the HTML and CSS. Press the down arrow to the right of the HTML/CSS code boxes and select “Analyze HTML”/“Analyze CSS” from the menu. See if you can fix some of the errors yourself, ask for help if you need it. I made a list of errors but I think it would be better practice for you to try and find and correct them yourself first.