Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Michael Rawlinson
Michael Rawlinson
1,507 Points
Posted by Michael Rawlinson
Michael Rawlinson
1,507 Points

Moving text up

How would I make the contact info list sit under the contact info? https://gyazo.com/ceb3e541056de49b172c33701a22ad2f : If you need to see my css files just ask an I will add them in.

2 Answers

Ryan Maugin
Ryan Maugin
2,742 Points
Ryan Maugin
Ryan Maugin
2,742 Points

you can do:

position: relative;
top; -200px

if -200px isn't enough then add more or less to it whatever suits you and if this isn't correct please provide your code to make it easier for us to see what you need to do and what could be the best solution :)

Michael Rawlinson
Michael Rawlinson
1,507 Points
Michael Rawlinson
Michael Rawlinson
1,507 Points

It didnt work. Here is my css code for the entire page but the contact info is under Page: contact info:

/***********************************************
General
************************************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
text-decoration: none;
}

img {
  max-width: 100%;
}

h3 {
  margin: 0 0 12em 0;
}



/***********************************************
Heading
************************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

/* Moves logo to the center */
#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/***********************************************
Navigation
************************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline;
}

nav a {
  font-weight: 800;
  padding: 10px 3px;
}



/***********************************************
Footer
************************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}



/***********************************************
Page: Portfolio
************************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}



/***********************************************
Page: About
************************************************/

.Head {
  overflow: hidden;
}

body {
  margin: 0;
}

.profile-photo {
  clear: both;
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/***********************************************
Page: Contact
************************************************/

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8em;
}

.contact-info a {
  position: relative;
  top; -200px
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

#primary {
  text-align: left;
  float: left;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

#primary h3 {
  text-align: center;
}

/*
.contact-info li.phone a {
  background-image: url('../image/phone.png');
  background-position: left;
}

.contact-info li.mail a {
  background-image: url('../image/mail.png');
  background-position: right;
}
*/



/***********************************************
Color
************************************************/

/* Site body */
body {
  background-color: #fff;
  color: #999;
}

/* Green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* Nav background on mobile */
nav {
 background: #599a68;
}

/* Logo text */
h1, h2 {
  color: #fff;
}

/* Color all links */
a {
  color: #6ab47b;
}

/* color for nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link color */
nav a.selected, nav a:hover {
  color: #32673f;
}