Having some trouble with positioning on my portfolio page

1

As you can see I’m having a hard time getting my portfolio image to center in the parent.
I’m also having a hard time moving the banner image slightly to the right so the heading text is aligned with the photo.

Another issue I’ve noticed is my website is definitely not responsive, I’m having a hard time knowing when an appropriate time to use bootstrap over any other code is.

Lastly, Incorporating a font awesome Icon that I can use as a link for my social medias, for some reason they are not appearing.

Thank you.

https://codepen.io/Heyrio/full/JJdRoJ/

2
  1. You shouldn’t use h tags as a container. Read this and this might help you understand.
  2. Use image tag instead of styling background-image to a div. This will give you more control.
  3. Your font awesome icon is not showing up because you are giving wrong path in link. Paste this link >> https://use.fontawesome.com/0212d6ca53.js in your codepen.io project’s Setting > Javascript.

Have fun and good luck!

3

I’ll read over all of that, thank you!

1 Like
4

Ok, so the font awesome issue is fixed.

I’m still trying to understand what would be a better substitute for that I can use as a container
and place an image inside of it.

5

I have been busy lately and sorry for late reply. If you are still figuring out, use ‘Div’ tag.

1 Like
6

Let me start out by saying you have a great start. What you have shown in your pen is very visually appealing.
However, your pen is totally not responsive at this point. You are attempting to use several bootstrap framework elements incorectly.

Bootstrap is a framework that allows you to have web pages that look good at any device width. When used properly pages look good form a 55 inch t.v. screen down to a 300 pixel phone screen.
Bootstrap uses a proprietary CSS, Javascript, & JQuery to accomplish this.

Before trying to use it in codepen, I would suggest you take some time to learn about bootstrap. Try these tutorials: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

When you do decide to use bootstrap in codepen there are some settings
you will have to make in codepen. Click on the settings button in the top portion of the codepen window.

  1. Click on HTML and copy and paste the following in the panel that says “Head Stuff”
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">.

Click on CSS and in the panel near the bottom where you add external resources paste this in.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
If you try to use the quick add feature it will use the newer beta version of bootstrap. You really don’t want to use the beta version.
This is also where you will want to add the link to the font awesome.

Click on Javascript and again in the panel near the bottom paste in this:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
While still in the Javascript settings, also paste this into one of the panels.
https://code.jquery.com/jquery-3.2.1.min.js

Click on the green Save & Close button.
Your codepen should now be configured to run bootstrap.

Test it out.
Copy and paste code from one of the tutorials in the link I provided.
Should render correctly.

7

Thank you for such a thorough answer, the link your provided is just what I need thank you.

8

Glad to help out.
Happy coding. :relaxed: