Personal Portfolio and CSS

HTML-CSS
1

I am using the sample provided:

in the personal portfolio responsive web design projects,

and I got through it ok, passed the test, etc., but I can’t get the “my projects” section to look right.

I have only four projects to show, not six,
so when I have them displayed they are set up with three on top and one on the bottom, and the one on the bottom is to the far left, which looks bad.

How can I put the one on the bottom in the center of the page?

can I use inline CSS for that?
or how can I put two on top and two on the bottom?

any help is appreciated…
GScottB

2

Well, since the projects are a bunch of anchor elements <a> inside of a grid container, you could just add an empty element between the third and fourth project if you like.

Just put a <p></p> in between the 3rd projects closing anchor tag </a> and the 4th projects opening anchor tag <a> This would place the fourth project in the center.

To achieve it with CSS alone you could use your .project-grid class selector to change the behavior of the grid.
grid-template-columns tell a grids columns how to behave.

Fiddle with it until you are satisfied. To make two equal sized projects appear on each side, change it to grid-template-columns: 50% 50%; or grid-template-columns: 1fr 1fr;

3

Tell the container to align content in the center.
Like, I’d need to look up the exact syntax, but both with and without Bootstrap there are CSS attributes to tell the parent to do that.

4

Thanks, the first solution worked and got the fourth project in the center.

BUT

The second solution doesn’t seem to do anything, that is,
using the .project-grid class selector to change the behavior of the grid…
tried both 50% 50%; and 1fr 1fr;
but nothing changed. ??
any thoughts?

5

If I had to guess, you aren’t using the same class name on your personal project as the sample on which you shared with us.

It is really hard to diagnose as you have provided us with someone else’s project as an example to answer your question based off of.

When I take my time to go to that CodePen and remove two <a> elements and update the CSS to what I suggested, it does work for me.

Can you provide us with a link to your project instead?

7

Ok, so it works for me to do the same thing, so maybe you are adjusting this property inside of the media breakpoint that is below it?

1 Like
8

Yes, I guess that is what I was doing, sorry, and thanks, now it works.

9

Happy that I could help with it!

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.