Questions about my portfolio

1

Hey there,

I feel close to done with my portfolio I just need to do some tweaks.

I’m having a hard time centering the social media icons in the bottom, how would you recommend doing it? The same goes for some of the text - as you can see not all of it is in center, but I can’t figure out how to do it?

Also the page scrolls a little bit horizontally, why is that?

Here you can see it:
portfolio

Thanks!

Best,
Henrik

2

Hi there,

You’ll want to do a couple of things. First, go to dirtymarkup.com and copy your HTML code into the main view. Make sure HTML is selected on the left, and change the ‘Output’ dropdown to ‘code fragment’.

Once that’s all set up, hit ‘Clean’. What I noticed while going through your code is that you’ve got a lot of elements that aren’t closed. Some others were closed too early (you’ll see an example of this on the first line after you clean the code). It’s all part of the learning process, but CodePen isn’t the best for catching these sorts of problems, so having a tool like dirtymarkup will help you fix them more quickly. Take a look at the cleaned up code and try to correct any other issues you see.

To center your social media links, we’re going to change how they’re organized. Right now, you have a row nested in a row:

<div class="row">
        <div class="col-md-4 col-md-offset-5">
            <div class="row">
                <div class="col-md-3">
                    <a href="https://www.facebook.com/henrikpultz" target=
                    "blank"><i aria-hidden="true" class=
                    "fa fa-facebook-official fa-4x"></i></a>
                </div>


                <div class="col-md-3">
                    <a href=
                    "https://dk.linkedin.com/in/henrik-pultz-melbye-100555127"
                    target="blank"><i aria-hidden="true" class=
                    "fa fa-linkedin-square fa-4x"></i></a>
                </div>


                <div class="col-md-3">
                    <a href="https://www.twitter.com/henrikmelbye" target=
                    "blank"><i aria-hidden="true" class=
                    "fa fa-twitter-square fa-4x"></i></a>
                </div>
            </div>
        </div>
    </div>

I made them center up a bit better by doing this

<div class="row">
    <div class="col-md-3 col-md-offset-5">
      <a href="https://www.facebook.com/henrikpultz" target="blank"><i aria-hidden="true" class=
                    "fa fa-facebook-official fa-4x"></i></a>
      <a href="https://dk.linkedin.com/in/henrik-pultz-melbye-100555127" target="blank"><i aria-hidden="true" class=
                    "fa fa-linkedin-square fa-4x"></i></a>
      <a href="https://www.twitter.com/henrikmelbye" target="blank"><i aria-hidden="true" class=
                    "fa fa-twitter-square fa-4x"></i></a>
    </div>
</div>

The problem is that the form above it is a little out of whack, too, so it’s always going to look out of place in relation. I won’t lie, fixing that centering issue won’t be easy, but play around with the Bootstrap grids. Also, check out CSS’s text-align.

3

Thanks, @PortableStick! It’s nice to get it cleaned up a bit.

I’ll try to work on the bootstrap grids.