Help with portfolio formatting

Code Feedback
1

Hi everyone!

My Portfolio Page

I’m pretty proud of what I’ve done so far, but I’m stuck on a few things:

-I keep getting a message saying " elements need row and column attributes, but I thought I put them in already.
-The links I put in to go to different parts of the page work when I view it on a computer, but not on a mobile device.
-I can’t figure out how to make my “back to top” links stay at the bottom of the box/section.

-My “submit” button won’t go underneath my message area. FIXED!
-I can’t figure out how to center my social media buttons. FIXED!

Any help on these issues (or others you spot) would be appreciated!

Thanks!

3

Hey, everything looks mostly fine until the contact form. There seems to be a little confusion there. You won’t need all those wrapping divs and rows; when using Bootstrap you basically always want to have a container, a row and as many column divs as you need.

An example of how you could style it so that it’s more “neat”, with your social links centered and your button underneath your <textarea> is like so:

HTML

<div id="contact" class="container-fluid" style="background-color:#00838F">
  <h1 class="heading">Contact</h1>
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <label class="text" for="fname">First Name</label>
      <input class="text" type="text" id="fname" name="firstname" placeholder="Your name...">
    </div>  
    <div class="col-xs-12 col-sm-6">
      <label class="text" for="lname">Last Name</label>
      <input class="text" type="text" id="lname" name="lastname" placeholder="Your last name...">
    </div>
    <div class="col-xs-12">
      <label class="text" for="message">Message</label>
      <textarea class="text" id="message" name="message" placeholder="Write something..."></textarea>
    </div>
    <div class="col-xs-12">
      <button style=color:gray class="text" type="submit">Submit</button>
    </div>
    <div class="col-xs-12">
      <a href="https://www.facebook.com/profile.php?ref=profile&id=841484" class="fa fa-facebook" target="_blank"></a>
      <a href="https://www.instagram.com/cocacolna/" class="fa fa-instagram" target="_blank"></a>
    </div>
  </div>
</div>

CSS

#contact {
  text-align:center; /* Centers all the inline elements (like the icons) */
}
input, textarea {
  display:block; /* Makes the inputs wrap on a new line so the labels are on top of them */
  width:50%; /* Change the width as you wish */
  margin:0 auto; /* Centers the inputs */
}
textarea {
  margin-bottom:10px; /* A little margin for the button not to be so close to the textarea */
}

Take a better look at the Bootstrap’s grid system. Or, at the Bootstrap forms, if you wish to follow their style.

As for your background image, I do see it. And I’m not really sure what you mean with your fourth point. Also, be sure to include your scripts in the pen settings, instead of having them in the HTML panel.

4

Thank you so much! What do you mean by my “scripts”?

5

No problem. Sorry, I meant the bootstrap CSS file and your custom font.