Struggling with Portfolio Project

1

I’ve really been struggling with a few things on the Portfolio project for a few days now. At this point I might be over-thinking it, but I’ve been reading and making adjustments and I’m still not there, and I’m starting to get frustrated. The three issues I’m struggling with are: getting my placeholder images to center properly on the page; getting my social media icons/links in the footer to center properly; and making my form look reasonably sleek and not scrunched up on the left.

Here’s a link to my CodePen

I’ll take any help I can get.

2

It is looking good! I am working on my Portfolio project as well. Here are some tips I can give you -

  1. To center the social media icons, add “text-align: center;” to your footer class
  2. To unscrunch your form from the left add padding-left to your “container-fluid” class
  3. For your portfolio images, I would actually nest them inside a bootstrap grid. For example -
-- first row
-- first column inside first row
-- first column inside first row
--end row div

You can repeat the above for as many rows as you wish to have. Note that the sum of the column widths in the grid has to be 12. So, if you wanted to have three columns, each would be col-xs-4 and so on.

Hope this helps.

1 Like
3

Thanks for the assist! Much appreciated.

4

Note that to do some of the things suggested by @bbuchake, you will have to included bootstrap (right now you just just have font awesome. You can add bootstrap by clicking on the gear on one of the code windows, selecting the css tab and then selecting Bootstrap from the drop-down menu…or you could just include it the same way that you included font awesome.

You might need/want to remove your custom css and use the boot strap classes. Otherwise, you might be overriding some of the bootstrap classes and may not easily get the result that you desire.

You will likely have to reclass everything to get it to work they way you want. You can always look at the bootsrap doc at http://getbootstrap.com/components

Also, you might want to consider adding the navbar-fixed-top class to the navbar so that it stays at the top of the screen.

1 Like
5

Oh. My. Glob. I’ve been on the verge of madness trying to figure out why some of the things I was trying to do weren’t working. I thought I had already enabled Bootstrap in the CSS settings on CodePen. Yes, I’ll need to clean some stuff up, but this is a massive help! Thank you!

6