Personal Portfolio Random Lines

1

I am working on my personal portfolio page as my second project. Here is the link:

At the bottom above my social media Font Awesome icons, there is a little white line that doesn’t belong, and I am having trouble tracking down the cause.

Any help is greatly appreciated.

2

Could have something to do with using a table for your social media icons. It’s probably a border that belongs to the table.

You’d be better off doing it like this:

<div id=#social>
   <ul>
       <li>FreeCodeCamp</li>
       <li>Facebook</li>
       <li>Linked In</li>
  </ul>
</div>

Then set it to display-inline and space them out with padding/margin.

1 Like
3

Yes, it’s coming from the Bootstrap table class.
You can get rid of it

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    border-top: none !important;
}

Using tables solely for layout is so 2000. Really no need for it nowadays when we have better CSS control. @Nicknyr suggestion is good.

Only use tables for presenting data in a table format.

4

Thanks

I used the table because I was having trouble with the vertical alignment. Played with the CSS for a long time before resorting to the table.

Any recommended resources out there to better understand how to use CSS with Bootstrap for vertical alignment issues?

I had tried this:

#bottom-nav-table {
border-style: none;
}

Even adding !important didn’t seem to work referencing the ID of the table.

New to Bootstrap so assuming there is over-riding CSS in Bootstrap that was not allowing me to change. Guessing I will learn over time what those are. Ran into a similar issue trying to vertical-align something

5

Use margin to move elements vertically. For example if you want to move the icons 10em down the page do something like

#social {
margin-top: 10em;
}

Don’t visualize it like you’re moving the div down the page. Visualize it more in terms of you’re adding margin space to the top of the div and that’s taking up space and pushing the div further down the page.