Fixing my social network buttons on portfolio project

1

Hi,

I am almost done with my portfolio project. I only have a few more issues I’m not sure how to fix.

  1. The FA icons I’m using in the “Around The Web” section are extremely tiny. How can I make them look more similar to the example page?

  2. How can I recreate that bubble (circle) that surrounds each icon in the example?

  3. How can I recreate the animation that occurs when the mouse hovers over the icon? I don’t remember seeing that in the challenges leading up to this project, but I could be wrong. Clearly its jQuery but not sure how to do it.

  4. Lastly, how can I eliminate the tiny space between the active tab and the navbar?

Here is a link to my portfolio project.

Here is the link to the example.

All advice is welcome and appreciated. Thanks!

2

Without looking too closely at it, all of these seem to be CSS issues.

I would recommend reviewing font sizes, borders, border radiuses, and fade animations.

Happy coding!

3

Hi JacksonBates,

Thanks for your feedback. I am aware that the issues are css in nature. Likewise, I know how to alter font size, create borders and use border radii. In fact, each of these features is in use in other elements on this page. But for whatever reason, I can’t seem to alter these features in these particular instances. Do you have any advice? Admittedly, I probably could touch up on the fade animations.

4

Hi,

Since my last response, I’ve been able to increase the size of the icons and move all but one closer together. Do you mind reviewing the code to see why the git hub icon is not moving even when I give it a margin-right?

Also, I noticed that since I’ve moved these icons the hover and click seems to activate over the location the icon used to be. Do you have any advice for this?

And the FA icons are not displaying in the paragraph under “about this page”.

Lastly, the only issue from the above, I still can’t seem to resolve is the extra space between the navbar and the active tab. Any hints?

5

I’ll be away from a computer most of the day, but I’ll check in again later :slight_smile:

1 Like
6

It helps if you understand what Bootstrap is doing under the hood. Bootstrap provides a whole range of CSS rules, including margin and padding rules.

You are using Bootstrap to create columns (which is good) and you are using plain CSS margins (which is good).

What is not good is to use both of these at the same time because they are both playing tug of war with each other!

Instead, try solving your problem only using Bootstrap.

Currently you are thinking of the section with the icons as 4 columns:

|   x   |   x   |   x   |   x   |

If you want the icons (x) closer to each other, use more columns and only have the icons in the middle ones.

A bit more like this:

|    |  x  |  x  |  x  |  x  |    |

Another approach is to offset the columns: Grid system · Bootstrap

Bootstrap does solve some problems in plain CSS, but it is also its own quite complex tool. I’d recommend reading the Bootstrap docs pretty thoroughly when you hit walls like this one, as the freeCodeCamp material only touches on the basics of Bootstrap.

Edit: Also, I think fixing the positioning will fix your hover states, too :slight_smile:

1 Like
7

Thanks for explaining that. It totally helped me solve my problem. I should’ve realized the bootstrap’s styling was blocking it. That was good, lesson learned.

But why aren’t my FA icons showing up on the other paragraph (About This Page) but showing up in the Around the Web section? Could that also be a conflict with the Bootstrap?

1 Like
8

You’re using outdated an Font Awesome link.

In your Quick add section in the CSS panel, change the version number for Font Awesome from 4.4.0 to 4.7.0 and it should work.

1 Like
9

That worked but now my icons shrunk back down and aren’t responding to the CSS. What am I missing?

10

BTW, I really appreciate your help and patience.

11

Oh, interesting. Been a while since I’ve used Font Awesome. It appears the new version has some new classes for handling size, so it is no longer handled like a font!

You can add the class fa-2x to your HTML to make it twice as large in it’s relative container (or 3x, 4x etc).

See the docs for more info:

http://fontawesome.io/examples/

1 Like
12

Thanks man. That did it. I see reading documentation is clearly a big deal.

1 Like