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
Kurtis Towery
1,436 PointsIcons set slightly higher than links
I added my icons and everything worked out well except they are a little bit higher. I tried adjusting it with padding with no avail.
3 Answers
Kurtis Towery
1,436 PointsThanks!
Kurtis Towery
1,436 PointsAnyone?
Daniel Gauthier
15,000 PointsHey Kurtis,
I didn't realize you had edited your initial post, since the system doesn't alert us unless a new reply is added.
I checked your code out and the main reason you're getting this behavior is that you're using a larger font size than Nick is using for the contact page in the videos. This is fine, but since the icons are only 20px, a slight adjusted needs to be made in order to make them line up the way Nick's does.
Below are two sets of alterations to your existing link rules. Plug them in to see how the background-position property affects the images:
1. Centering the Images
If you want to center the background within its parent container, change the following rules to include the background-position: left center; declaration.
.contact-info li.phone a {
background-image: url('../img/phone.png');
background-position: left center;
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
background-position: left center;
}
2. Setting the Images Lower Than the Text Like in the Video
If you'd prefer to have the images appear a little lower than the text like Nick's appear in the video, apply the following rules to include the background-position: left bottom; declaration.
.contact-info li.phone a {
background-image: url('../img/phone.png');
background-position: left bottom;
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
background-position: left bottom;
}
You May Also Like:
You can also use percentage values to move the background image around within its container, so background-position: 0% 0%; would place the image in the top left corner of the element for instance.
You can also increase the size of the images using the background-size property. So, if you wanted images that are a little larger to go with the slightly larger text, you could add something like the following:
.contact-info li.phone a {
background-image: url('../img/phone.png');
background-position: left bottom;
background-size: 25px;
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
background-position: left bottom;
background-size: 25px;
}
Good luck with the course!
Daniel Gauthier
15,000 PointsDaniel Gauthier
15,000 PointsHey Kurtis,
Your links aren't working, so maybe this will help you with getting your code up on the forums:
How to Post Code on the Forums
There are two ways to share your code on the forums here, excluding using external tools from outside of Treehouse.
Method One
The first method is to use a series of three ` (backticks, located at the top left of the keyboard) without any spaces on one line, paste all of your code starting on the second line, then closing the code block with a second series of three backticks. Take a peek at the link for the "Markdown Cheatsheet" located above the "Post Answer" button anytime you're about to post a comment or answer. Using this method, the code will look like this:
```css
(code here)
```
Method 2
The second method is a little more convoluted, but it lets us look at your entire project and make our own copy to try fixing issues. I'll order the steps since it can be a little confusing the first time around:
Open the workspace you're having trouble with.
On the menu bar located to the left of the "Preview Workspace" button is the "Snapshot Workspace" (camera icon), click that.
A popout will appear with another button that says "Take Snapshot", click that.
It should create a new snapshot, which will appear beneath the "Take Snapshot" button in the popout. Click the snapshot you want to share.
The snapshot should open a new browser tab. Highlight the url in the snapshot's browser tab (it should look like this: https://w.trhou.se/duckyj79b1i0 ).
Create your forum post and paste the snapshot's url into the post. Other Treehouse users will be able to open the snapshot, then 'fork' a new copy to check out.
Keep in mind that you can only ever have five snapshots, but you can delete them by hovering over the snapshot located below the "Take Snapshot" button in the popout and click the trash bin icon.
Good luck!