Please excuse me, I'm new here

Please excuse me, I'm new here
0

#1

So i’m in love with coding and free code camp. I watching all kinds of videos and currently i’m in the building my personal portfolio section. Being that I’m still in the “hatchling” phase, its very difficult to trouble shoot issues with my codes. I’ve built out my portfolio on codepen and for some reason I’ve got a very strange issue going on that I cant seem to figure out. Any thoughts or input would be great as to what is causing the issue. It will be very easy to see the issue with my project. Any thoughts would be great.

I tried to use margin-left:auto; and margin-right:auto; on the images but that did not solve the problem


#2

What exactly to you want to do vs what it does now?


#3

Well for some reason I’ve got this weird white block next to the images on page 2, 3 and 4 and I cant figure out how to get the images to stretch back over that area.


#4

EDIT: I saw a mistake on my original response and have corrected the icon response below.

Part of the problem is that you have syntax errors in your icons. For example, you have:

<a class="btn btn-default" href="#"><i class="fa fa-twitter fa-lg" id="twitterIcon" aria-hidden="true"</a>Twitter</i>

but it should be:

<a class="btn btn-default" href="#"><i class="fa fa-twitter fa-lg" id="twitterIcon" aria-hidden="true">Twitter</i></a>

You were missing a > after “true” and had the </i> and </a> tags reversed.

I believe the other strange effect is because of the ul class=“nav nav-pills”. I am not sure how to fix it, but I am sure someone else does. Also, change the

<header>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type = 'text/css'>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 
</header>

to

<head>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type = 'text/css'>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 
</head>

or better yet, get rid of the tags and move the following:

  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type = 'text/css'>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> 

to the Stuff for <head> section of the HTML Pen settings (click the gear by HTML in Codepen).


#5

I noticed you have the following in your CSS:

.nav-pills {
  font-size: 1.7em;
  background-color: silver;
  margin-bottom:10%;
}

What were you trying to accomplish with the above? I might be able to help you create your desire effected, if I know what you are trying to do.


#6

Thanks very much - as for the syntax errors, I actually wanted to have the icons and copy in the same button, im not sure if this is affecting the pages performance abilities at all???


#7

I am not understanding what you mean by “copy” in the above comment.


#8

as far as .nav-pills I was under the impression that i needed that to style the buttons? again, you’ll have to excuse my ignorance in these subjects.


#9

copy = twitter
copy = facebook
etc etc.

Just the names of the icons and sites they link to


#10

If you make the changes I proposed, the buttons will have both the icons and text of the sites. To add a link to Twitter button, you would do something like:

<a href="https://twitter.com/yourTwitterAccountName" class="btn btn-default" href="#">
  <i class="fa fa-twitter fa-lg" id="twitterIcon" aria-hidden="true">Twitter</i>
</a>

#11

I get that you want the font-size of the nav buttons’ text to be 1.7em, but I am not sure what you are wanting to accomplish with the following:

  background-color: silver;
  margin-bottom:10%; 

#12

actually that was just left over from some “playing around” i was doing earlier. its just “toxic waste”


#13

so I went back and was playing with .nav-pills , margin-bottom:10%; and what I needed to accomplish was moving he red box down on the page, so adding the margin-bottom;10%; seemed to accomplish this for me.


#14

Hey Randell - thanks so much for the great advice so far! I’m having trouble with this piece of code you gave me. I implemented this code but the link just goes to a blank page. I’m confused.

Could it have anything to do with there being 2 of each link, 1 link to each social media account on page one and 1 link to each social media account on page four?


#15

That is just a quirky thing about Codepen and the way it deals with external links. Just add:

target="_blank"

to the anchor tag and the links will open in a new window. Also, even though it is not causing trouble, I recommend delete the second href="#".

For example, for your Twitter link, it would be:

<a target="_blank" href="https://twitter.com/rushbrodeal" class="btn btn-default">

#16

One thing that has bothered me about your portfolio is on smaller screens, there was a white bar at the top. I was able to get rid of it by moving your ul element to inside your div with class=“pageOne” and then removing the following from your .pageOne css style:

  padding-top: 10%;
  margin-top: -15%;

and removing the following from the .nav-pills css class:

  margin-bottom: 10%;

#17

Epic! worked perfectly! thank you so much!


#18

@RandellDawson could it be that the white bar issue is happening because of the problem down on page 3 with the placeholder’s being in a funky setup? I’m just wondering if those placeholders where ordered properly if that could solve the issue? I’ve been stuck trying to figure out what happened with the top two place holders on page 3.


#19

If you update the Codepen above with the changes I suggested, then I can take a look at the rest of the page.


#20

@RandellDawson So I updated the code with the changes. I believe I did it correctly as the page did not loose any functionality or become anymore distorted than it already is.